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

复制代码

完整代码 传送门