超链接静态资源下载中 download属性无效解决方案

Symbol_Yang

于 2021-10-06 11:28:57 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42663395/article/details/120622790

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

当前端需要从CDN下载文件时，直接使用download属性可能无效，因为CDN可能存在限制。为了解决这个问题，可以借助file-saver npm包。通过引入并调用FileSaver.saveAs方法，可以指定CDN链接和文件名，实现安全下载。这种方法避免了download属性的限制，确保文件下载的顺利进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般的，前端对后台的返回的静态数据链接下载是，可以通过动态生成a标签，并给对应标签上的download属性赋值，下载下来的文件就会以download的参数为文件名；
但是，如果是对CDN的链接数据进行动态生成a标签时，download就会出现无效的问题，这是由于cdn中进行了限制了。如解开限制，会造成一定的安全隐患；
所以，我们将以其他的方式，对cdn链接的资源文件进行特殊的处理。代码如下：
npm下载 **file-saver** 插件
[file-saver的Api文档](https://www.npmjs.com/package/file-saver)

npm install file-saver --save

运用方式如下

	let FileSaver = require('file-saver');
  	FileSaver.saveAs('cdn的链接', '对应的文件名（记得加上文件后缀）');