js实现oss批量下载文件_前端实现批量打包下载文件

需求说明：

后端接口返回附件列表(含URL)，这些附件存在阿里云OSS上。一期需求是实现对列出的附件进行点击下载，也就是每次只下载点击的附件(PDF | 图片)，使用一段时间后制定二期需求时，增加批量下载功能，需要打包在一起。附言：本文所写都是纯前端实现，后端接口只需要返回路径即可。

单独下载图片：

直接使用标签，会存在这样的问题：同源链接点击后直接在浏览器打开，通过在标签内指定download属性可以避免，但是非同源链接却不行。所以通过Canvas + JS方式实现点击图片直接下载，这里要解决这么几个问题：1、非同源及跨域问题；2、Canvas图片下载限制问题。同源问题很好解决，只需要一行代码：

image.setAttribute('crossOrigin', 'anonymous')

为了解决Canvas图片像素大小的限制，转为blod流数据，下面附上代码：

/**

* @param {Number} imgsrc 图片路径

* @param {Number} name 自定义图片名称

* 直接使用canvas下载有图片像素大小的限制，所以转成blod流下载

**/downloadIamge (imgsrc, name) {//下载图片地址和图片名

let image = newImage()//解决跨域 Canvas 污染问题

image.setAttribute('crossOrigin', 'anonymous')

let fun= this.data