在 JavaScript 如何下载文件

在 Web 开发中，文件下载功能是一个非常常见的功能。在本文中，将介绍在 JavaScript 中如何实现下载文件。

使用 location.href

当需要打开新页面时，在 JavaScript 中可以使用 ​​location.href​​ 。在某些情况下，可以用它来下载文件，当然这里的下载实际上依赖于服务器设置。因为当浏览器检测到 ​​url​​ 的响应是不支持的类型时，它将下载文件而不是直接预览，通常是设置 ​​content-type​​。

使用 <a> 标签的下载属性

HTML5 中的 ​​download​​ 属性用于用户点击超链接时下载文件。

此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是 ​​/​​ 和 \ 会被转换为下划线。大多数文件系统限制了文件名中的标点符号，因此，浏览器将相应地调整建议的文件名。

• 此属性仅适用于同源 URL。
• 尽管 HTTP URL 需要位于同一源中，但是可以使用 ​​blob:URL​​ 和 ​​data:URL​​ ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。
• 如果 HTTP 头中的 ​​Content-Disposition​​ 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性。
• 如果 HTTP 头属性 ​​Content-Disposition​​ 被设置为 ​​inline​​（即 ​​Content-Disposition='inline'​​），那么 ​​Firefox​​ 优先考虑 HTTP 头 ​​Content-Dispositiondownload​​ 属性。

使用 API 下载文件

使用 ​​blob:​​ ，在 JavaScript 中实现下载的常用方式。通过 API 获取URL数据并将其转换为 ​​blob​​。对于受同源URL限制的文件，可以使用 ​​fetch​​，因为 ​​fetch​​ 支持来自跨源的请求数据。

可以使用下面的函数来下载文件：

function downloadFile(url, fileName) {
    fetch(url, {
        method: "get",
        mode: "no-cors",
        referrerPolicy: "no-referrer",
    })
        .then((res) => res.blob())
        .then((res) => {
            const aElement = document.createElement("a");
            aElement.setAttribute("download", fileName);
            const href = URL.createObjectURL(res);
            aElement.href = href;
            aElement.setAttribute("target", "_blank");
            aElement.click();
            URL.revokeObjectURL(href);
        });
}