前端下载文件

PC或者移动端下载文件（包括excel、图片等）到本地

一、方案

根据平台有不同的方案：

• PC
  主要使用 window.open 方法，直接调用接口，接口返回文件直接下载

• 移动端
  主要通过 file\img 转 base64，通过 a[download] 来下载

二、代码实现

2.1 PC

如果下载接口需要登录态，且通过 cookie 传递

window.open(接口, '_blank');

如果下载接口需要登录态，且通过自定义 headers 字段传递

// 下载文件流
// axios 需要传 responseType: 'blob'，和 url data 平级
export function downloadTemplate(data = {}, headers = {}) {
  return request({
    url: '/web/addFriend/downloadTemplate',
    method: 'get',
    responseType: 'blob',
    data,
    headers
  })
}

// 使用 blob atag 进行下载
// 这里的 res 需要使用 axios 的整个 response，可以通过 response.headers['content-type'].indexOf('application/octet-stream') !== -1 判断
function downloadFile(res) {
  const url = window.URL.createObjectURL(new Blob([res.data]))
  // 生成一个a标签
  let link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  // 生成文件名，并且去掉多余的双引号
  const fileNameStr = res.headers['content-disposition'].split(';').find(item => item.indexOf('filename') !== -1)
  const fileName = fileNameStr ? fileNameStr.substring(fileNameStr.indexOf('=') + 1).replace(/\"/g, '') : Date.now()
  link.download = decodeURIComponent(fileName)
  link.click()
  link = null
}
// 这里需要判断一下返回结果，因为有可能返回的是一个报错
// 参考这篇文章 https://www.jianshu.com/p/26f23345a4be

2.2 移动端

/**
 * URL 转 base64
 **/
convertImgToBase64 (url, callback) {
  return new Promise(resolve => {
    const img = new Image();
    // 图片域名要开启跨域
    // canvas 不能处理跨域图片，执行 canvas 操作前也要开启跨域
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
      let canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.height = this.height;
      canvas.width = this.width;
      ctx.drawImage(this, 0, 0);
      const imgBase64 = canvas.toDataURL("image/png");
      canvas = null;
      resolve(imgBase64);
    };
    img.src = url;
  })
},
// 下载
handleSave() {
  this.convertImgToBase64(this.url)
    .then(imgBase64 => {
      const a = document.createElement("a");
      const event = new MouseEvent("click");
      a.download = name || "photo";
      a.href = imgBase64;
      a.dispatchEvent(event);
    });
}

三、遇到的问题

暂无