在开发者文档管理中，对于页面上的附件下载。一般快速实现方式，是使用a标签的
download属性，直接下载文件。但是在测试中发现在一些特殊情况下，会变成在线预览。而对于开发需求中，json文件也要以附件形式下载，方便cp进行操作。本文针对这种情况说明及列举对应的解决方法。
1、使用a标签测试下载附件的现象
- 在同源情况下，文件都可以正常下载
- 不同源情况，部分文件(.json、.txt、.png等)会变成在线预览形式
2、a标签下载相关属性
download:设置该属性，可以让浏览器把地址视为在线下载资源
-
如果没有指定值，浏览器会从多个来源决定文件名和扩展名：
Content-DispositionHTTP 标头。- URL 路径的最后一段。
- 媒体类型。来自
Content-Type标头，data:URL 的开头，或blob:URL 的Blob.type。
-
filename：决定文件名的值。/和 “ 被转化为下划线（_）。文件系统可能会阻止文件名中其他的字符，因此浏览器会在必要时适当调整文件名。
href:设置下载地址，可以支持data:url,blob:url
注意：上述异常现象的原因是 download 只在同源 URL 或 blob:、data: 协议起作用
3、解决方法：
- 不同源情况下，使用
data:url或者blob:url处理,变成同源文件处理
//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
Content-Disposition: attachment;filename="fname";
- 使用代理方案，变成同源文件处理
参考
原文链接：https://juejin.cn/post/7323398442729242661 作者：5大大大大雄
