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