JAVASCRIPT-图片下载保存到本地

最新推荐文章于 2026-06-04 11:17:29 发布

转载最新推荐文章于 2026-06-04 11:17:29 发布 · 2.1k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/yxfboke/p/12876477.html

收录于

html+js+jquery+css

法一：直接最简单的html实现:

<a href="/images/myw3schoolimage.jpg" download="w3logo">

这种方法最简单，但是换成如下地址，图片地址与当前地址不同源的时候，此时点击会在新窗口打开这个图片地址，而不是下载。

<a href="https://cn.gravatar.com/avatar/b8ea6205c38fad951b5b02ae22f037c8&d=mm">
　　<img src="https://cn.gravatar.com/avatar/b8ea6205c38fad951b5b02ae22f037c8&d=mm" alt="testload" />
</a>

为了解决上述方法的缺陷，这边百度找到了第二种方法：

复制代码

   /**
    * @param {*} imgData 图片对象
    * @param {*} str     图片下载到本地的文件名
    * @param {*} type    图片下载到本地的类型
    */
   commonDownloads(imgData, str, type) {
    const blob = new Blob([imgData], { type: type });
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // 兼容ie
        window.navigator.msSaveOrOpenBlob(blob, str);
    } else {
        const downloadElement = document.createElement('a');
        const href = window.URL.createObjectURL(blob); // 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象
        downloadElement.href = href;
        downloadElement.download = str;
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href); // 释放之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
    }
   }

复制代码

调用：

        <div>
          <img src="https://cn.gravatar.com/avatar/b8ea6205c38fad951b5b02ae22f037c8&d=mm" alt="testload" onClick={this.imageClick} />
        </div>

复制代码

  imageClick = () => {
    // 下载图片

　　　 const imgUrl = 'https://cn.gravatar.com/avatar/b8ea6205c38fad951b5b02ae22f037c8&d=mm';

const str = `${new Date().getTime()}.png`;

const type = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'

    Util.commonDownloads(imgUrl, str, type);
  }

复制代码

方法二用的是blob，还有许多其他的方法iframe和canvans等。