图片下载到本地（3）

应用场景：

需要批量下载图片，下载压缩包

解决方案：

将图片数据处理成arraybuffer类型或bold类型，使用jszip下载

代码：

// 接口处理

// 获取二维码详情 Base64方式 -> arraybuffer
export function getImg({ id: id }) {
  return request({
    url: '/sys/qrcode/getImg',
    method: 'get',
    responseType: 'arraybuffer',
    params: {
      id
    }
  });
}

// request.js

// response 拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    // TODO
    if (response.config.responseType === 'arraybuffer') {
      return res;
    }
    if (res.code === '1') {
      return res;
    } else {
      console.error(`错误码：${res.code}，错误信息：${res.data}，报错接口：${response.request.responseURL.split('//')[1]}`);
      return Promise.reject(res);
    }
  },
  error => {
    console.log(error.response);   
  }
}

import JSZip from 'jszip';
import FileSaver from 'file-saver';


// 批量下载

batchDownload() {
  const zip = new JSZip();
  const promises = [];
  // 获取压缩处理的图片列表
  this.batchData.forEach(row => {
    const promise = codeApi.getImg({ id: row.id }).then(data => {
      const file_name = row.name + '.png'; // 获取文件名
      zip.file(file_name, data, { binary: true }); // 逐个添加文件
    });
    promises.push(promise);
  });
  // 下载
  Promise.all(promises).then(() => {
    zip.generateAsync({ type: 'blob' }).then(content => {
      console.log(content);
      // 生成二进制流
      const time = momentUtil.YYYYMMDD();
      FileSaver.saveAs(content, `批量下载-${time}.zip`); // 利用file-saver保存文件  自定义文件名
    });
  });
},
// 单个下载
exportQrCode(row) {
  const time = momentUtil.YYYYMMDD();
  codeApi.getImg({ id: row.id }).then(res => {
    FileSaver.saveAs(new Blob([res]), `${row.name + '-' + time}.png`);
  });
 }