a标签下载文件并重命名的注意事项

2,112 阅读2分钟

利用a标签下载时,如果是浏览器可以解析的会被直接打开,不能解析则进行下载的动作。

解决方法

  • 后端在响应头上添加content-type=application/octet-stream;

在使用a标签下载文件时,download属性可以更改下载的文件名,但是当a标签的下载链接跨域时,download属性将不会生效,原因是浏览器无法获取到文件,不能对他进行更改

可以通过http先将文件下载后再重命名,前提是后端允许跨域,但这种方法有个弊端,就是下载的文件如果特别大会导致长时间没反应,用户体验不好。

let xml = new XMLHttpRequest();
xml.open("GET", url, true);
xml.responseType = "blob";
xml.onload = function () {
    let r_url = window.URL.createObjectURL(xml.response);
    let a = document.createElement("a");
    a.href = r_url;
    a.download = fileName;
    // 使用a标签批量下载文件时最好使用_blank,否则只会下载最后一个文件
    a.setAttribute("target", "_blank");
    a.click();
    a.remove();
};
xml.send();

参考:

  • 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 属性。