背景
a标签中download属性可以更改下载文件的文件名。但是如果是跨域的话,download属性就会失效。
解决方案一
<a onclick="downloadFile('https://img1-cdn-picsh.stock-ring.com/download/pdf/2021-6-23/pdf_16244197738344649.pdf','fileName.pdf');">下载文件</a> <a onclick="downloadFile('https://img1-cdn-picsh.stock-ring.com/download/mp3/2021-6-23/mp3_16244197781388916.mp3','fileName.mp3');">下载文件</a> <script> function downloadFile(url, fileName) { var x = new XMLHttpRequest(); x.open("GET", url, true); x.responseType = 'blob'; x.onload = function (e) { var url = window.URL.createObjectURL(x.response) var a = document.createElement('a'); a.href = url; a.download = fileName; a.click(); } x.send(); } </script>
解决方案二
当然我们也可以通过设置响应的header
Content-Disposition
用来激活浏览器的下载,同时可以设置默认的下载的文件名。
服务端向客户端浏览器发送文件时,如果是浏览器支持的文件类型,如 TXT、JPG 等类型,会默认直接使用浏览器打开,如果需要提示用户保存,则可以通过配置 Content-Disposition 字段覆盖浏览器默认行为。常用的配置如下:Content-Disposition:attachment;filename=FileName.txt
如果发现地址打开,无法下载或者自动保存的地址不是自己想要的默认名字时,可以考虑修改返回的header,腾讯云COS,CDN等都可以设置返回的header
参考文献:
https://cloud.tencent.com/document/product/228/41737
- 本文固定链接: https://www.phpmianshi.com/?id=270
- 转载请注明: admin 于 PHP面试网 发表
《本文》有 0 条评论