高级艳妇交换俱乐部小说,高潮+国产

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

點擊HTML按鈕或JavaScript時如何觸發(fā)文件下載？

王林

發(fā)布： 2023-09-12 12:49:02

轉(zhuǎn)載

1942人瀏覽過

點擊html按鈕或javascript時如何觸發(fā)文件下載？

現(xiàn)如今，許多應(yīng)用程序允許用戶進行文件的上傳和下載。例如，抄襲檢測工具允許用戶上傳一個包含一些文本的文檔文件。然后，它會檢查抄襲并生成報告，用戶可以下載該報告。

每個人都知道使用input type file來創(chuàng)建一個上傳文件按鈕，但是很少有開發(fā)者知道如何使用JavaScript/ JQuery來創(chuàng)建一個文件下載按鈕。

本教程將教授點擊HTML按鈕或JavaScript時觸發(fā)文件下載的各種方法。

使用HTML的標(biāo)簽和download屬性，在按鈕點擊時觸發(fā)文件下載

每當(dāng)我們給標(biāo)簽添加download屬性時，我們可以將標(biāo)簽作為文件下載按鈕使用。我們需要將文件的URL作為href屬性的值傳遞，以允許用戶在點擊鏈接時下載特定的文件。

立即學(xué)習(xí)“Java免費學(xué)習(xí)筆記（深入）”；

語法

用戶可以按照下面的語法使用標(biāo)簽創(chuàng)建一個文件下載按鈕。

<a href = "file_path" download = "file_name">

登錄后復(fù)制

在上述語法中，我們添加了download屬性和文件名作為download屬性的值。

參數(shù)

file_path – 這是我們希望用戶下載的文件路徑。

Example 1

的翻譯為：

示例 1

在下面的示例中，我們將圖像URL作為HTML 標(biāo)簽的href屬性的值傳遞。我們使用下載按鈕作為標(biāo)簽的錨文本

每當(dāng)用戶點擊按鈕時，他們可以看到它觸發(fā)了文件下載。

<html>
   <body>
      <h3> Using the <i> download attribute of <a> tag </i> to create file download button using JavaScript. </h3>
      <p> Click the below button to download the image file </p>
      <a href = "https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg"
      Download = "test_image">
         <button type = "button"> Download </button>
      </a>
   </body>
</html>

登錄后復(fù)制

使用window.open()方法

window.open() 方法在新標(biāo)簽頁中打開一個URL。我們可以將URL作為 open() 方法的參數(shù)傳遞。

如果open()方法無法打開URL，則會觸發(fā)文件下載。

語法

用戶可以按照以下語法使用window.open()方法來創(chuàng)建一個文件下載按鈕。

window.open("file_url")

登錄后復(fù)制

在上述語法中，我們將文件URL作為window.open()方法的參數(shù)傳遞。

Example 2

在下面的示例中，每當(dāng)用戶點擊按鈕時，它會觸發(fā)downloadFile()函數(shù)。在downloadFile()函數(shù)中，window.open()方法會觸發(fā)文件下載。

<html>
<body>
   <h3> Using the <i> window.open() method </i> to create a file download button using JavaScript. </h3>
   <p> Click the below button to download the image file </p>
   <button type = "button" onclick = "downloadFile()"> Download </button>
</body>
   <script>
      function downloadFile() {
         window.open("https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg")
      }
   </script>
</html>

登錄后復(fù)制

獲取用戶輸入，使用該輸入創(chuàng)建文件，并允許用戶下載該文件

這種方法將允許用戶在輸入框中編寫文本。之后，使用輸入的文本，我們將創(chuàng)建一個新文件，并允許用戶下載該文件。

語法

用戶可以按照以下語法創(chuàng)建一個文件，其中包含自定義文本，并允許用戶下載它。

var hidden_a = document.createElement('a'); 
hidden_a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(texts)); 
hidden_a.setAttribute('download', "text_file"); 
document.body.appendChild(hidden_a); hidden_a.click();

登錄后復(fù)制

在上述語法中，我們對文本進行了編碼，以將其附加到文件中，并使用標(biāo)簽進行創(chuàng)建。

算法

第一步 - 通過訪問HTML輸入來獲取文本。
Step 2 ? Create a custom HTML tag using JavaScript createElement() method.
步驟 3 ? 使用setAttribute()方法，為hidden_a HTML元素設(shè)置href屬性。將編碼后的文本作為href屬性的值。
步驟 4 ? 再次使用 setAttribute() 方法，并將 download 屬性設(shè)置為隱藏元素 hidden_a 的下載文件名值。
第五步 - 將hidden_a元素追加到body中。
步驟6 - 使用click()方法在hidden_a元素上觸發(fā)點擊。當(dāng)它調(diào)用click()方法時，它開始下載。
第7步 - 使用removeChild()方法從文檔主體中移除hidden_a元素。

Example 3

的中文翻譯為：

示例3

In the example below, users can enter any custom text in the input field and click the button to trigger file download using JavaScript. We have implemented the above algorithm to trigger a file download.

<html>
<body>
   <h3> Create the file from the custom text and allow users to download that file </h3>
   <p> Click the below button to download the file with custom text. </p>
   <input type = "text" id = "file_text" value = "Entetr some text here.">
   <button type = "button" onclick = "startDownload()"> Download </button>
</body>
   <script>
      function startDownload() {
         // access the text from the input field
         let user_input = document.getElementById('file_text');
         let texts = user_input.value;
         
         // Create dummy <a> element using JavaScript.
         var hidden_a = document.createElement('a');
         
         // add texts as a href of <a> element after encoding.
         hidden_a.setAttribute('href', 'data:text/plain;charset=utf-8, '+ encodeURIComponent(texts));
         
         // also set the value of the download attribute
         hidden_a.setAttribute('download', "text_file");
         document.body.appendChild(hidden_a);
         
         // click the link element
         hidden_a.click();
         document.body.removeChild(hidden_a);
      }
   </script>
</html>

登錄后復(fù)制

使用axios庫創(chuàng)建一個下載文件按鈕

axios庫允許我們從任何URL獲取數(shù)據(jù)。因此，我們將從任何URL或文件路徑獲取數(shù)據(jù)，然后將該數(shù)據(jù)設(shè)置為標(biāo)簽的href屬性的值。此外，我們將使用setAttribute()方法向標(biāo)簽添加download屬性，并使用click()方法觸發(fā)文件下載。

語法

用戶可以按照以下語法使用axios和JavaScript來觸發(fā)文件下載。

let results = await axios({
   url: 'file_path',
   method: 'GET',
   responseType: 'blob'
})
// use results as a value of href attribute of <a> tag to download file
hidden_a.href = window.URL.createObjectURL(new Blob([results.data]));

登錄后復(fù)制

在上面的語法中，axios.get() 方法允許我們從存儲在 results 變量中的 file_path 獲取數(shù)據(jù)。之后，我們使用 new Blob() 構(gòu)造函數(shù)將數(shù)據(jù)轉(zhuǎn)換為 Blob 對象。

Example 4

的中文翻譯為：

示例4

在下面的示例中，我們使用axios從URL獲取數(shù)據(jù)，將其轉(zhuǎn)換為Blob對象，并將其設(shè)置為href屬性的值。

之后，我們通過JavaScript點擊了元素以觸發(fā)文件下載。

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.1/axios.min.js"> </script>
</head>
<body>
   <h3> Using the <i> axios library </i> to trigger a download file. </h3>
   <p> Click the below button to download the file with custom text. </p>
   <button type = "button" onclick = "startDownload()"> Download </button>
</body>
   <script>
      async function startDownload() {
         // get data using axios
         let results = await axios({
            url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ4gbghQxKQ00p3xIvyMBXBgGmChzLSh1VQId1oyhYrgir1bkn812dc1LwOgnajgWd-Yo&usqp=CAU',
            method: 'GET',
            responseType: 'blob'
         })
         let hidden_a = document.createElement('a');
         hidden_a.href = window.URL.createObjectURL(new Blob([results.data]));
         hidden_a.setAttribute('download', 'download_image.jpg');
         document.body.appendChild(hidden_a);
         hidden_a.click();
      }
   </script>
</html>

登錄后復(fù)制

以上就是點擊HTML按鈕或JavaScript時如何觸發(fā)文件下載？的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！