脚本宝典收集整理的这篇文章主要介绍了前端从web服务器或者CDN下载资源,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src = "img/books/book1.jpg" alt = "日俄海战"/> <a href = "img/books/book1.jpg" download="日俄海战.jpg">点击下载图片</a> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--解决img标签不能展示网络图片的问题--> <meta name="referrer" content="no-referrer"> <title></title> </head> <body> <img src = "https://img2020.cnblogs.COM/bLOG/1456655/202110/1456655-20211004112059587-1817640282.png" alt = "cdn和对象存储"/> <a href = "https://img2020.cnblogs.com/blog/1456655/202110/1456655-20211004112059587-1817640282.png" download="cdn和对象存储.png">点击下载图片</a> </body> </html>
如果加上download属性,文件还是直接打开,无法正常下载,这有可能是download属性失效造成的。
download属性也受同源策略的影响,即非同一端口下不能直接下载第三方文件,所以这里download失效之后做的仅仅是跳转功能:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--解决img标签不能展示网络图片的问题--> <meta name="referrer" content="no-referrer"> <!--代替import axios From 'axios'语句--> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title></title> </head> <script> // import axios from 'axios' /** * 下载文件 * @param url 文件url * @param fileName */ @H_482_512@function downloadByURL(url,fileName) { axios .get(url, { responseType: 'blob' }) .then(response => { data = response.data if (!data) return const blob = new Blob([data], {type: "image/png"}) const link = document.createElement("a") // 创建<a>标签 link.style.display = "none" // 隐藏<a>标签 link.href = URL.createObjectURL(blob) // 根据二进制流对象生成一个url link.download = fileName // 这里填保存成的文件名 link.click() //强制触发a标签事件 URL.revokeObjectURL(link.href) link.remove(); }); } </script> <body> <img src = "https://img2020.cnblogs.com/blog/1456655/202110/1456655-20211004112059587-1817640282.png" alt = "cdn和对象存储"/> <a href = "#" onclick="downloadByURL('https://img2020.cnblogs.com/blog/1456655/202110/1456655-20211004112059587-1817640282.png','cdn.png')">点击下载图片</a> </body> </html>
保存修改后,刷新浏览器,点击下载超链接,可以看到再次弹出了路径选择的弹窗
这有一篇关于谷歌浏览器跨域问题的博客,以后回来看【译】3种解决CORS错误的方式与Access-Control-Allow-Origin的作用原理
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script> function downloadByURL(url){ window.open(url,'_self') } </script> <body> <img src = "img/books/book1.jpg" alt = "日俄海战"/> <a href = "#" onclick="downloadByURL('img/books/book1.jpg')" download="日俄海战.jpg">点击下载图片</a> </body> </html>
参考:
以上是脚本宝典为你收集整理的前端从web服务器或者CDN下载资源全部内容,希望文章能够帮你解决前端从web服务器或者CDN下载资源所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。