两种情况
- url经过后端处理,返回的是文件流
- url没有经过后端处理,返回的是文件存储地址url
第一种情况:
window.open('url')
缺点:会打开一个新的窗口,请求完成后自动关闭,用户体验不是特别好,但是问题不大<a href="url" download="文件名"></a>
虽然不会打开新弹窗,但是兼容性不好,IE 需要>IE13,safari暂未支持
第二种情况:
上面的方法对于第二种情况,都只是跳转页面并展示图片,但是并不会自动下载
使用canvas将地址url转换成dataurl
Data URLs 由四个部分组成:前缀 (data:)
、指示数据类型的 MIME 类型
、如果非文本则为可选的 base64 标记、数据本身,
方法:
function downloadQrCodeByBase64(dataUrl, fileName) {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 将画布内容转换为base64
const base64 = canvas.toDataURL();
const a = document.createElement('a');
a.href = base64;
a.download = fileName;
// 触发a链接点击事件,浏览器开始下载文件
a.click();
};
img.src = dataUrl;
// 必须设置,否则canvas中的内容无法转换为base64
img.setAttribute('crossOrigin', 'Anonymous');
}
缺点:图片越大,转换后的 base64 编码越长,尽量避免对大图进行 DataURL 转换,防止转换后的长度超出浏览器限制