前端下载图片的几种方式

少油少盐不要辣

已于 2024-06-27 08:33:37 修改

阅读量543

点赞数 1

分类专栏：前端下载文章标签：前端

于 2024-06-10 10:39:20 首次发布

本文链接：https://blog.csdn.net/qq_40713392/article/details/139514876

版权

前端下载专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

据mdn描述的a标签释义：利用的就是download属性只在同源 URL 或 blob:、data: 协议起作用

1.后端返回文件流，前端利用Blob解析文件流下载

2.下载资源必须是与页面地址同源时，直接利用a标签下载

注意点：

下载资源必须与页面地址同源
如果非同源，那么点击a标签时在新窗口打开图片的

3.利用fetch或者xhr从图片地址获取二进制数据（blob）进行下载（利用blob:协议）

代码如下：

fetch('https://cdn.beekka.com/blogimg/asset/202012/bg2020122613.jpg')
  .then(res => {
    res.blob().then(res => {
      console.log(res);
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(res);
      link.download = '22';
      link.click();
      window.URL.revokeObjectURL(link.href);
    })
  })