需求说明：

后端接口返回附件列表(含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.dataURLtoBlob

image.οnlοad= function() {

let canvas= document.createElement('canvas') //创建Canvas

canvas.width =image.width

canvas.height=image.height

let context= canvas.getContext('2d')

context.drawImage(image,0, 0, image.width, image.height) //Canvas画图

let url = canvas.toDataURL({format: 'png', multiplier: 4}) //通过toDataURL()方法将图像转为url

var blob =fun(url)var objurl = URL.createObjectURL(blob) //转成blod

let a = document.createElement('a') //生成一个a元素

let event = new MouseEvent('click') //创建一个单击事件

a.download = name || "'photo" //设置图片名称

a.href = objurl //将生成的URL设置为a.href属性

a.dispatchEvent(event) //触发a的单击事件

}

image.src= imgsrc + '?=' + Math.random() //加入随机数 解决跨域不能下载问题

},/**

* @param {string} dataurl 图像地址

* 转blod流*/dataURLtoBlob (dataurl) {

let arr= dataurl.split(',')

let mime= arr[0].match(/:(.*?);/)[1]

let bstr= atob(arr[1])

let n=bstr.length

let u8arr= newUint8Array(n)while (n--) {

u8arr[n]=bstr.charCodeAt(n)

}return newBlob([u8arr], {type: mime})

}

在实现的时候，如果这样指定image的src属性：

image.src = imgsrc

在运行之后，发现并没有解决非同源图片直接打开的问题，所以在下载地址后加了随机数

image.src = imgsrc + '?=' + Math.random()

打包批量下载：

这里使用了其他的包：JSZip(用于文件打包)和 file-saver(用于下载)，因为是在Vue项目中使用，直接在项目中下载

npm install jszip

npm install file-saver

在需要使用的文件中引入：

import JSZip from "jszip";

import FileSaver from"file-saver";

下载主方法代码如下：

//批量下载

async down() {try{

let zip= newJSZip();for (let i = 0; i < this.arr.length; i++) {

let lst= this.arr[i].split(".");

let fileType= lst[lst.length - 1];if (fileType.toLocaleUpperCase() === "PDF") {

awaitthis.getFile(this.arr[i]).then(pdf =>{

zip.file("HelloPDF.pdf", pdf, { binary: true});

});

}else{

awaitthis.getBase64Image(this.arr[i]).then(res =>{

zip.file("HelloIMG" + i + "." + fileType, res, { base64: true});

});

}

}this.downImg(zip);

}catch(err) {

console.log("err", err);

}

},

这里使用了async/await来进行文件异步操作，确保zip填充操作执行完之后，才执行zip的下载。

downImg(zip) {

zip

.generateAsync({

type:"blob"})

.then(content=>{

let fileName= "批量下载.zip";

FileSaver.saveAs(content, fileName);

});

},//****传入图片链接，返回base64数据

getBase64Image(url) {return new Promise((resolve, reject) =>{var base64 = "";var img = newImage();

img.setAttribute("crossOrigin", "Anonymous");

img.οnlοad= () =>{

base64= this.image2Base64(img);

resolve(base64.split(",")[1]);

};

img.οnerrοr= () => reject("加载失败");

// 这里可能会有跨域失败的问题，解决方案同上，url + 随机数

img.src=url;

});

},

image2Base64(img) {var canvas = document.createElement("canvas");

canvas.width=img.width;

canvas.height=img.height;var ctx = canvas.getContext("2d");

ctx.drawImage(img,0, 0, img.width, img.height);var dataURL = canvas.toDataURL("image/png");returndataURL;

},//****传入文件链接，返回arraybuffer数据

getFile(url) {return new Promise((resolve, reject) =>{

// 这里的$http是Vue里的axiosthis.$http({

method:"get",

url,

responseType:"arraybuffer"})

.then(data=>{

resolve(data.data);

})

.catch(error =>{

reject("PDF加载失败：" +error);

});

});

},

以上，实现方式记录。