信息直达 · JavaScript下载文件的五种途径

2023-01-13 12:04:33

JavaScript 文件下载的终极指南

文件下载为何选择 JavaScript？

JavaScript 作为前端开发的基石，在文件下载方面大放异彩。它相较于传统的服务器端下载方式，提供了更快的速度、灵活的控制和强大的功能，例如断点续传和多文件并发下载。

五种方法，下载文件大公开

1. window.location.href 方法

最直接的下载方式，直接将文件的 URL 地址赋给 window.location.href 属性。

const url = 'http://example.com/file.txt';
window.location.href = url;

2. window.open() 方法

后台下载利器，打开一个新的浏览器窗口或选项卡，在不影响当前页面浏览的情况下下载文件。

const url = 'http://example.com/file.txt';
window.open(url, '_blank');

3. iframe 方法

创建 iframe 元素，并设置其 src 属性为文件的 URL 地址，在 iframe 中下载文件。

const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = 'http://example.com/file.txt';
document.body.appendChild(iframe);

4. 动态创建 a 标签下载

动态创建 a 元素，设置其 href 属性为文件的 URL 地址，触发 click 事件即可下载文件。

const a = document.createElement('a');
a.href = 'http://example.com/file.txt';
a.download = 'file.txt';
a.click();

5. form 表单形式

创建一个 form 元素，设置其 action 属性为文件的 URL 地址，添加一个 submit 按钮，提交表单即可下载文件。

const form = document.createElement('form');
form.action = 'http://example.com/file.txt';
form.method = 'GET';
const button = document.createElement('button');
button.type = 'submit';
button.innerText = '下载文件';
form.appendChild(button);
document.body.appendChild(form);