a标签下载出现预览场景

5大大大大雄2024-01-14 12:14

在开发者文档管理中，对于页面上的附件下载。一般快速实现方式，是使用a标签的download属性，直接下载文件。但是在测试中发现在一些特殊情况下，会变成在线预览。而对于开发需求中，json文件也要以附件形式下载，方便cp进行操作。本文针对这种情况说明及列举对应的解决方法。

1、使用a标签测试下载附件的现象

在同源情况下，文件都可以正常下载
不同源情况，部分文件(.json、.txt、.png等)会变成在线预览形式

2、a标签下载相关属性

download:设置该属性，可以让浏览器把地址视为在线下载资源

如果没有指定值，浏览器会从多个来源决定文件名和扩展名：
- Content-Disposition HTTP 标头。
- URL 路径的最后一段。
- 媒体类型。来自 Content-Type 标头，data: URL 的开头，或 blob: URL 的 Blob.type。
filename：决定文件名的值。/ 和 `` 被转化为下划线（_）。文件系统可能会阻止文件名中其他的字符，因此浏览器会在必要时适当调整文件名。

href:设置下载地址，可以支持data:url,blob:url

注意：上述异常现象的原因是 download 只在同源 URL 或 blob:、data: 协议起作用

3、解决方法：

不同源情况下，使用data:url或者blob:url处理,变成同源文件处理

javascript 复制代码

//blob:url,处理各种文件
    fetch("http://127.0.0.1:3000/test.png")
        .then(res => res.blob()).then(res => {
        document.querySelector("#file").href = URL.createObjectURL(res);
    })
//data:url处理指定文件
    fetch("http://127.0.0.1:3000/test.json")
        .then(res => res.text())
            .then(res => {
            document.querySelector("#file").href = `data:application/json,${res}`;
    })

使用Content-Disposition 在服务端设置HTTP 响应头设置,设置为附件形式attachment

css 复制代码

Content-Disposition: attachment;filename="fname";

使用代理方案，变成同源文件处理

a标签下载出现预览场景

1、使用a标签测试下载附件的现象

2、a标签下载相关属性

3、解决方法：

参考