[html] 使用a标签的download属性下载文件会有跨域问题吗？如何解决？

最近刚遇到这个问题，后台返回的图片链接，点击按钮批量下载，a标签的 download 属性只对同源文件有效，
所以我们这里先把图片 url 转为 blob 格式，然后再下载

  /**
   ** 将图片 url 转换为 blob 格式
   ** @param httpUrl: 图片链接，如 https://cdn.aaa.com/bbb.jpg
   */
  private async urlToBlob(httpUrl) {
    const res: Response = await fetch(httpUrl);
    const blob: Blob = await res.blob();
    const blobUrl = URL.createObjectURL(blob);
    return blobUrl;
  }

  /**
   ** 下载图片到本地
   ** @param blobUrl： blob 格式的图片文件
   ** @param name: 图片名称
   */
  private download(blobUrl, name) {
    // 创建虚拟a标签
    const eleLink = document.createElement('a');
    eleLink.download = name;
    eleLink.style.display = 'none';
    eleLink.href = blobUrl;
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
    URL.revokeObjectURL(blobUrl);
  }

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题