a标签加上downlaod属性后,就可完成对href属性链接文件的下载,但仅仅是限于同源文件,如果是非同源,download属性会失效。
无download属性的时候,a标签的默认行为是链接跳转进行预览,而针对浏览无法预览的文件,也可达到下载的效果。
怎么解决下载非同源文件的问题?? 例如image图片
方法: 通过canvas绘制,生成临时路径 (
data协议路径 // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
),这个路径就是一个同源路径,然后传入下载函数进行下载。
let img = new Image();
img.setAttribute('crossOrigin', 'anonymous')
img.src = data.entry;
img.onload = function(data) {
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0, canvas.width, canvas.height);
let url = canvas.toDataURL('image/png');
downLoadByLink(url,"小程序码");
}
const downLoadByLink = (url, filename) =>{
//如果提供filename,则filename需要包含扩展名
var link,
evt; link = document.createElement('a');
link.href = url;
filename && link.setAttribute('download', filename);
if(document.fireEvent) {
window.open(link.href);
}else {
evt = document.createEvent('MouseEvents');
evt.initEvent('click', true, true);
link.dispatchEvent(evt);
}
};