需求说明：
后端接口返回附件列表（含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 = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
let fun = this.dataURLtoBlob
image.onload = 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 = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
}
在实现的时候，如果这样指定image的src属性：
image.src = imgsrc
在运行之后，发现并没有解决非同源图片直接打开的问题，所以在下载地址后加了随机数
image.src = imgsrc + '?=' + Math.random()
打包批量下载：
这里使用了其他的包：JSZip（用于文件打包）和 file-saver（用于下载），因为是在Vue项目中使用，直接在项目中下载
npm install jszipnpm install file-saver
在需要使用的文件中引入：
import JSZip from "jszip";
import FileSaver from "file-saver";
下载主方法代码如下：
//
async down() {
try {
let zip = new JSZip();
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") {
await this.getFile(this.arr[i]).then(pdf => {
zip.file("HelloPDF.pdf", pdf, { binary: true });
});
} else {
await this.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 = new Image();
img.setAttribute("crossOrigin", "Anonymous");
img.onload = () => {
base64 = this.image2Base64(img);
resolve(base64.split(",")[1]);
};
img.onerror = () => 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");
return dataURL;
},
//****传入文件链接，返回arraybuffer数据
getFile(url) {
return new Promise((resolve, reject) => { // 这里的$http是Vue里的axios
this.$http({
method: "get",
url,
responseType: "arraybuffer"
})
.then(data => {
resolve(data.data);
})
.catch(error => {
reject("PDF加载失败：" + error);
});
});
},
以上，实现方式记录。