写点什么

在 JavaScript 如何下载文件

作者:devpoint
  • 2023-02-11
    广东
  • 本文字数:962 字

    阅读完需:约 3 分钟

在 JavaScript 如何下载文件

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

使用 location.href

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

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

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


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


  • 此属性仅适用于同源 URL。

  • 尽管 HTTP URL 需要位于同一源中,但是可以使用 blob:URLdata: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);        });}
复制代码


发布于: 刚刚阅读数: 3
用户头像

devpoint

关注

细节的追求者 2011-11-12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
在 JavaScript 如何下载文件_JavaScript_devpoint_InfoQ写作社区