一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

a标签下载出现预览场景

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

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

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

2、a标签下载相关属性

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

  • 如果没有指定值,浏览器会从多个来源决定文件名和扩展名:

  • 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大大大大雄

(0)
上一篇 2024年1月14日 下午4:15
下一篇 2024年1月14日 下午4:25

相关推荐

发表评论

登录后才能评论