前端解决图片下载问题方案

前言

在工作中，往往会遇到图片或文件点击下载的前端需求。但图片下载可能会出现点击不是图片下载而是变成在线预览的情况。以下的方案是本人实践过的解决方案（Vue项目）。记录且给有需求的小伙伴一些思路。

1. 一般情况下直接用a标签点击下载

<a href="图片url" download>下载</a>

这个方法大概率会出现图片在线预览而不是下载到本地的情况； 所以使用以下两种方法解决；

2. a标签图片url后面带上filename参数（适用于同源的情况）

download() {
  let url = `图片路径?filename=带后缀文件名`;
  let a = document.createElement('a');
  a.href = url;
  a.download = '自定义文件名';
}

url带filename解决的问题： 1.文件名无法修改。 2.文件是图片时不是下载而是预览。

3.当出现跨域问题无法下载时使用以下方法

downloadImage() {
  let url = '图片url';
  let urlList = url.split('.');
  let suffix = urlList[urlList.length - 1]; // 获取图片格式后缀
  let a = document.createElement('a');
  document.body.appendChild(a);
  a.download = '图片名称';
  a.target = '_blank';
  this.getUrlBase64(url, base64 => {
    a.setAttribute('href', base64);
    a.click();
    a = null;
  }, suffix);
}
getUrlBase64(url, callback, suffix) {
  let canvas = document.createElement('canvas');
  let ctx = canvas.getContext('2d');
  let img = new Image();
  img.src = url;
  img.crossOrigin = ''; // 解决跨域问题
  img.onload = () => {
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);
    let dataURL = canvas.toDataURL(`image/${suffix}`);
    callback.call(this, dataURL);
    canvas = null;
  };
}

结语

目前遇到下载图片问题使用以上方法可解决。如果有更好的方法解决欢迎交流。共同进步！谢谢