如何在单击 HTML 按钮或 JavaScript 时触发文件下载?
如今,许多应用程序都允许用户上传和下载文件。例如,抄袭检查工具允许用户上传包含一些文本的文档文件。之后,它会检查是否存在抄袭并生成报告,然后用户可以下载。
每个人都知道使用输入类型文件创建上传文件按钮,但很少有开发人员知道使用 JavaScript/JQuery 创建文件下载按钮。
本教程将教授单击 HTML 按钮或 JavaScript 时触发文件下载的各种方法。
使用带有 HTML <a> 标签的下载属性在单击按钮时触发文件下载
每当我们将下载属性添加到 <a>标签,我们可以将 <a> 标签用作文件下载按钮。我们需要将文件 URL 作为 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();
在上述语法中,我们对文本进行编码以将其附加到文件中,并使用 <a> 标记来创建它。
算法
步骤 1 - 通过访问 HTML 输入从输入中获取文本。
步骤 2 - 使用 JavaScript createElement() 方法创建自定义 HTML <a> 标记。
步骤 3 - 使用 setAttribute() 方法,并为 hidden_a HTML 元素设置 href 属性。使用编码文本作为 href 属性的值。
步骤 4 − 再次使用 setAttribute() 方法,将下载属性与下载文件名值一起设置为 hidden_a 元素。
步骤 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() { // 从输入字段访问文本 let user_input = document.getElementById('file_text'); let texts = user_input.value; // 使用 JavaScript 创建虚拟 <a> 元素。 var hidden_a = document.createElement('a'); // 编码后将文本添加为 <a> 元素的 href。 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(); document.body.removeChild(hidden_a); } </script> </html>
使用 axios 库创建下载文件按钮
axios 库允许我们从任何 URL 获取数据。因此,我们将从任何 URL 或文件路径获取数据,然后,我们将该数据设置为 <a> 标签的 href 属性的值。此外,我们将使用 setAttribute() 方法向 <a> 标签添加下载属性,并触发 click() 方法以开始文件下载。
语法
用户可以按照以下语法使用 axios 通过 JavaScript 触发文件下载。
let results = await axios({ url: 'file_path', method: 'GET', responseType: 'blob' }) // 使用 results 作为 <a> 标签 href 属性的值来下载文件 hidden_a.href = window.URL.createObjectURL(new Blob([results.data]));
在上面的语法中,axios.get() 方法允许我们从 results 变量中存储的 file_path 中获取数据。之后,我们使用新的 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() { // 使用 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>