利用 a 标签实现下载图片（不是打开）的正确姿势

最新推荐文章于 2023-09-09 09:00:07 发布

Lyrelion

最新推荐文章于 2023-09-09 09:00:07 发布

阅读量7.5k

点赞数 1

分类专栏： H5C3 文章标签： a

本文链接：https://blog.csdn.net/Lyrelion/article/details/111312364

版权

H5C3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1. 场景再现

当 a 标签中添加了 download 属性，想要实现下载图片时：
点击 a 链接，没有进行下载，而是在当前页面打开了图片

2. 原因

<a> 有 download 属性，可以实现下载 同源文件（ ip 和端口相同）
当图片 不同源 时，点击下载，会在当前窗口直接打开图片，而不是进入下载状态

3. 解决方案（两种）

3.1 使用 target 属性，打开新页面进行下载

这样可以维持当前页面状态，用户需要在新页面中保存图片

3.2 写一个点击事件，通过 canvas 方式保存图片

<script>
  /**
   * 下载图片
   * @param {string} imgsrc 图片地址
   */
  downloadIamge(imgsrc) {
    // 新建图片对象
    let image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    // 图片加载
    image.onload = function() {
      // 新建 canvas标签
      let canvas = document.createElement("canvas");
      // 设置 canvas宽高
      canvas.width = image.width;
      canvas.height = image.height;
      // 添加 canvas画笔
      let context = canvas.getContext("2d");
      // 绘制图片
      context.drawImage(image, 0, 0, image.width, image.height);
      // 得到图片的 base64 编码
      let url = canvas.toDataURL("image/png");
      // 新建 a标签
      let a = document.createElement("a");
      // 新建点击事件
      let event = new MouseEvent("click");
      // 将图片的 base64 编码，设置为 a标签的地址
      a.href = url;
      // 触发点击事件
      a.dispatchEvent(event);
    };
    // 将图片地址 设置为 传入的参数 imgsrc
    image.src = imgsrc;
  };

  /**
   * 下载方法
   * @param {string} filepath 文件地址
   */
  downloads(filepath) {
    // isImageFile()：自定义函数，根据*后缀*判断是否是图片
    if (isImageFile(filepath)){
      this.downloadIamge(filepath)
    } else {
      this.downloadFile(filepath)
    }
  };
</script>