vue下载网络图片

针对单文件的情况下，同源的文件，可以通过 < a> 标签的 download 属性下载文件

const elt = document.createElement('a');
elt.setAttribute('href', url);
elt.setAttribute('download', 'file.png');
elt.style.display = 'none';
document.body.appendChild(elt);
elt.click();
document.body.removeChild(elt);

如果不存在CORS问题, 可以借助Blob实现下载(构造xhr请求文件地址, 以Blob的形式接收Response)：

function downloadWithBlob(url) {
 fetch(url).then(res => res.blob().then(blob => {
  var a = document.createElement('a');
  var url = window.URL.createObjectURL(blob);
  var filename = 'file.png';
  a.href = url;
  a.download = filename;
  a.click();
  window.URL.revokeObjectURL(url);
 }));
}

如果存在CORS问题，可以考虑使用 canvas 将图片转换成 base64 编码之后再通过 标签的 download 属性下载：

getUrlBase64(url) {
      return new Promise(resolve => {
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        let img = new Image()
        img.crossOrigin = 'Anonymous' //允许跨域
        img.src = url
        img.onload = function() {
          canvas.height = 300
          canvas.width = 300
          ctx.drawImage(img, 0, 0, 300, 300)
          let dataURL = canvas.toDataURL('image/png')
          canvas = null
          resolve(dataURL)
        }
      })
    },

 

调用部分

download() {
      this.getUrlBase64(‘此处传入图片链接’).then(base64 => {
        let link = document.createElement('a')
        link.href = base64
        link.download = 'qrCode.png'
        link.click()
      })
    },

作者：rithe
链接：https://www.jianshu.com/p/6af20a47ad3d