前端实现图片下载功能

// 方法1  使用时可能存在跨域问题具体看你项目
function downloadWithBlob (url, name) {
  fetch(url).then(res => {
    res.blob().then(blob => {
      let a = document.createElement('a')
      let url = window.URL.createObjectURL(blobj)
      let filename = name || '图片.jpg'
      a.href = url
      a.download = filename
      a.click()
      window.URL.revokeObjectURL(url)
    })
  })
}

// 方法2 后端返回一个图片流前端调用接口下载
// 项目中使用的是 umi+dva 具体写法根据技术栈来看, 写法大同小异

*exportImg2({ payload, callback }, { call, put }) {
    try {
        const res = yield call(downLoadImg, payload);
        if (callback) callback(res);
    } catch (err) {
        if (callback) callback('fail');
    }
},
    
   
downCancelUrl = cancelDownloadUrl => e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'orderList/exportImg2',
      payload: {
        filePath: cancelDownloadUrl,
      },
      callback: res => {
        const blob = new Blob([res]);
        const fileName = '预订照片.jpg';
        const selfURL = window[window.webkitURL ? 'webkitURL' : 'URL'];
        const elink = document.createElement('a');
        if ('download' in elink) {
          elink.download = fileName;
          elink.style.display = 'none';
          elink.href = selfURL.createObjectURL(blob);
          document.body.appendChild(elink);

          // 触发链接
          elink.click();
          selfURL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
        } else {
          navigator.msSaveBlob(blob, fileName);
        }
      },
    });
  };
  
// 点击下载
<a
   disabled={recored.cancelDownloadUrl === '' || recored.cancelDownloadUrl === null}
   onClick={this.downCancelUrl(recored.cancelDownloadUrl)}
>
   下载
</a>