function downloadFile(file, fileName){
const blob = new Blob([file]);
const fileReader = new FileReader();
fileReader.readAsDataURL(blob);
fileReader.onload = (e) => {
const a = document.createElement("a");
a.download = fileName || '测试.png';
a.href = e.target?.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
}
3. base64 格式或者链接格式
使用 canvas 配合 a 标签下载图片;
创建图片对象;
解决跨域 Canvas 污染问题;
将资源链接赋值;
触发 image.onload 事件;
创建 canvas 标签;
设置 canvas 的宽高;
绘制图片;
得到图片的base64编码数据;
创建 a 标签;
创建一个单击事件;
设置图片名称;
将生成的 URL 设置为 a.href 属性;
触发 a 的单击事件。
function downloadImage(imgsrc, name, type = 'png'){
let image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.onload = function () {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context?.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL(`image/${type}`);
let a = document.createElement("a");
let event = new MouseEvent("click");
a.download = name || "测试";
a.href = url;
a.dispatchEvent(event);
}
image.src = imgsrc
}
4. 将文件流传 base64 再使用 downloadImage 下载
使用 Blob 对象转换文件流;
使用 FileReader 阅读 blob 对象;
在 fileReader.onload 中获取 base64 字符串;
使用 downloadImage 下载 base64 图片。
function downloadFileUrl(file){
const blob = new Blob([file]);
const fileReader = new FileReader();
fileReader.readAsDataURL(blob);
fileReader.onload = (e) => {
const url = e.target?.result;
downloadImage(`data:image/png;base64,${url}`, '测试')
};
}