a 連接 download 不生效問題

衆所周知，在 HTML5 中，A 標籤是支持 download 屬性的，此屬性指示瀏覽器下載 URL 而不是導航到它，可是該屬性受到同源策略的限制。

那麼咱們如何讓 A 標籤在跨域場景下依然有效呢？

解決方案就是將圖片先轉換成 canvas，而後獲取 canvas 的data-URL,最後建立一個 a 標籤模擬點擊便可。

注: 圖片要啓用 CORS

核心代碼以下:

const width = 200, height = 200;

// 建立canvas
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;

// 建立Image實例
const img = new Image();
img.setAttribute("crossOrigin", "Anonymous");
img.src = url;

img.onload = function() {
  context.drawImage(img, 0, 0, width, height);
  const a = document.createElement("a");
  a.href = canvas.toDataURL();
  a.download = name;
  a.click();
};

複製代碼

完整代碼 傳送門