如何在点击HTML按钮或JavaScript时触发文件下载

现在，许多应用程序允许其用户上传和下载文件。例如，抄袭检查工具允许用户上传一个带有一些文本的文档文件。之后，它检查是否有抄袭行为，并生成一份报告，用户可以下载。

每个人都知道使用输入型文件来创建一个上传文件按钮，但很少有开发者知道使用JavaScript/JQuery来创建一个文件下载按钮。

本教程将教授各种方法，在点击HTML按钮或JavaScript时触发文件下载。

使用HTML `<a>`标签的下载属性，在点击按钮时触发文件下载

只要我们在<a>标签上添加下载属性，我们就可以使<a>标签作为一个文件下载按钮工作。我们需要把文件的网址作为href属性的一个值传递给用户，让用户在点击链接时可以下载任何特定的文件。

语法

用户可以按照下面的语法来使用<a>标签来创建一个文件下载按钮。

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

在上面的语法中，我们已经添加了下载属性和文件名作为下载属性的值。

参数

file_path – 这是一个我们希望用户下载的文件路径。

例子1

在下面的例子中，我们把图片的URL作为HTML <a>标签的href属性的值来传递。我们使用了下载按钮作为<a>标签的锚文本。

每当用户点击这个按钮，他们可以看到它触发了文件的下载。

<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>

使用window.open()方法

window.open()方法在新标签中打开一个URL。我们可以把URL作为open()方法的一个参数来传递。

如果open()方法不能打开该URL，它就会触发文件下载。

语法

用户可以按照下面的语法来使用window.open()方法来创建一个文件下载按钮。

window.open("file_url")

在上面的语法中，我们把文件的URL作为window.open()方法的一个参数来传递。

例2

在下面的例子中，只要用户点击了按钮，就会触发downloadFile()函数。在downloadFile()函数中window.open()方法触发了文件的下载。

<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>

接受用户的输入，用它创建一个文件，并允许用户下载该文件

这种方法将允许用户在输入栏中写文字。之后，利用输入的文本，我们将创建一个新文件，并允许用户下载该文件。

语法

用户可以按照下面的语法，从自定义文本中创建一个文件，并允许用户下载它。

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();

在上面的语法中，我们对文本进行编码，将其附加到文件中，并使用标签来创建。

算法

第1步 – 通过访问HTML输入，从输入中获取文本。

第2步 – 使用 JavaScript createElement() 方法创建一个自定义的 HTML 标签。

第3步 – 使用setAttribute()方法，为hidden_a这个HTML元素设置href属性。使用编码后的文本作为href属性的值。

第4步 – 再次使用setAttribute()方法，为hidden_a元素设置带有下载文件名的download属性。

第5步 – 将hidden_a元素追加到正文中。

第6步 – 使用click()方法来触发对hidden_a元素的点击。当它调用click()方法时，它开始下载。

第7步 – 使用removeChild()方法从文档主体中删除hidden_a元素。

例3

在下面的例子中，用户可以在输入框中输入任何自定义文本，然后点击按钮，使用JavaScript触发文件下载。我们已经实现了上述算法来触发文件下载。

<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>

使用axios库来创建一个下载文件按钮

axios库允许我们从任何URL中获取数据。因此，我们将从任何URL或文件路径中获取数据，之后，我们将把这些数据设置为标签的href属性的值。同时，我们将使用setAttribute()方法给标签添加一个下载属性，并触发click()方法来开始下载文件。

语法

用户可以按照下面的语法来使用axios，用JavaScript来触发一个文件下载。

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]));

在上面的语法中，axios.get()方法允许我们从存储在结果变量中的file_path中获取数据。之后，我们使用new Blob()构造函数将数据转换为Bolb对象。

示例4

在下面的例子中，我们使用axios从URL中获取数据，将其转换为Blob对象，并将其设置为href属性的值。

之后，我们从JavaScript中点击了<a>元素来触发文件下载。

<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>