现如今，许多应用程序允许用户进行文件的上传和下载。例如，抄袭检测工具允许用户上传一个包含一些文本的文档文件。然后，它会检查抄袭并生成报告，用户可以下载该报告。
每个人都知道使用input type file来创建一个上传文件按钮，但是很少有开发者知道如何使用JavaScript/ JQuery来创建一个文件下载按钮。
本教程将教授点击HTML按钮或JavaScript时触发文件下载的各种方法。
使用HTML的3499910bf9dac5ae3c52d5ede7383485标签和download属性，在按钮点击时触发文件下载
每当我们给3499910bf9dac5ae3c52d5ede7383485标签添加download属性时，我们可以将3499910bf9dac5ae3c52d5ede7383485标签作为文件下载按钮使用。我们需要将文件的URL作为href属性的值传递，以允许用户在点击链接时下载特定的文件。
语法
用户可以按照下面的语法使用3499910bf9dac5ae3c52d5ede7383485标签创建一个文件下载按钮。
<a href = "file_path" download = "file_name">
在上述语法中，我们添加了download属性和文件名作为download属性的值。
参数
-
file_path – 这是我们希望用户下载的文件路径。
Example 1
的翻译为：
示例 1
在下面的示例中，我们将图像URL作为HTML 标签的href属性的值传递。我们使用下载按钮作为标签的锚文本
每当用户点击按钮时，他们可以看到它触发了文件下载。
<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()方法的参数传递。
Example 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>标签进行创建。
算法
-
第一步 – 通过访问HTML输入来获取文本。
-
Step 2 − Create a custom HTML <a> tag using JavaScript createElement() method.
-
步骤 3 − 使用setAttribute()方法，为hidden_a HTML元素设置href属性。将编码后的文本作为href属性的值。
-
步骤 4 − 再次使用 setAttribute() 方法，并将 download 属性设置为隐藏元素 hidden_a 的下载文件名值。
-
第五步 – 将hidden_a元素追加到body中。
-
步骤6 – 使用click()方法在hidden_a元素上触发点击。当它调用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>
使用axios库创建一个下载文件按钮
axios库允许我们从任何URL获取数据。因此，我们将从任何URL或文件路径获取数据，然后将该数据设置为<a>标签的href属性的值。此外，我们将使用setAttribute()方法向<a>标签添加download属性，并使用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() 方法允许我们从存储在 results 变量中的 file_path 获取数据。之后，我们使用 new Blob() 构造函数将数据转换为 Blob 对象。
Example 4
的中文翻译为：
示例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>
以上就是点击HTML按钮或JavaScript时如何触发文件下载？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 点击HTML按钮或JavaScript时如何触发文件下载？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
