js下载图片文件或者流文件
js下载图片文件后端返回url
function imgBase64(img) {
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
const extension = img.src
.substring(img.src.lastIndexOf(".") + 1)
.toLowerCase();
return canvas.toDataURL("image/" + extension, 1);
}
const link = document.createElement("a");
link.setAttribute("download", "qrCode");
const img = new Image();
img.src = res.data.qrCodeUrl + "?timestamp=" + new Date().getTime();
img.setAttribute("crossOrigin", "Anonymous");
img.onload = () => {
link.href = imgBase64(img);
link.click();
};
js下载流文件到本地
这里可能会有小问题获取不到Content-Disposition 无法拿到filename
原因如下:
CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。
让后端在返回时插入如下代码段:
Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
axios({
url: `xxx`,
method: 'get',
params: { ...searchData },
responseType: 'blob'
}).then(res => {
const link = document.createElement('a')
let blob = new Blob([res.data], {type : 'application/vnd.ms-excel'})
let temp = res.headers["content-disposition"].split("''")[1].split('.')[0]
let fileName = decodeURIComponent(temp)
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
setTimeout(() => {
document.body.removeChild(link)
}, 0);
}).catch(err => {
console.log(err);
})
axios请求过程中可能会遇到后端报错的情况,这时候后端返回的数据是application/json格式,需要转换后提示报错
if(res.data.type === 'application/json'){
let reader = new FileReader();
reader.readAsText(res.data);
reader.onload = function(e){
const {message} = JSON.parse(reader.result)
that.$message({
message: `导出失败 ${message}`,
type: 'error'
})
}
return false;
}