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;
}