2024-04-09 vue前端批量下载打包压缩

背景：前端批量获取到了文件路径，需要下载到本地，多条数据则打包压缩下载压缩包。

本文将会使用JSZip和FileSaver.js

1、安装JSZip和FileSaver.js：

yarn add jszip file-saver -S

2、引入依赖： 

import JSZip from 'jszip';
import { saveAs } from 'file-saver';

 3、读取文件方法： 

/**
 * 读取文件
 * @param fetchUrl  文件路径
 */
async function fetchBlob(fetchUrl, method = 'GET', body = null) {
  const response = await window.fetch(fetchUrl, {
    method,
    body: body ? JSON.stringify(body) : null,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    }
  });
  const blob = await response.blob();
  return blob;
}

4、批量压缩下载：

/**
 * 打包压缩下载
 * @param data  源文件数组
 * @param fileName  压缩文件的名称
 */
export const compressAndDownload = (data, fileName) => {
  const zip = new JSZip();
  const promises = [];
  data.forEach((item) => {
    const promise = fetchBlob(item.fileUrl).then((res) => {
      const fileName = item.fileName;
      zip.file(fileName, res, { binary: true });
    });
    promises.push(promise);
  });

  return new Promise((resolve) => {
    Promise.all(promises).then(() => {
      zip
        .generateAsync({
          type: 'blob',
          compression: 'DEFLATE', // STORE：默认不压缩 DEFLATE：需要压缩
          compressionOptions: {
            level: 9 // 压缩等级1~9    1压缩速度最快，9最优压缩方式
          }
        })
        .then((res) => {
          resolve();
          saveAs(res, fileName || '压缩包.zip'); // 利用file-saver保存文件
        });
    });
  });
};

5、单条文件下载： 

/**
 * 下载单个文件
 * @param url  文件路径
 * @param fileName  下载文件的名称
 */
export const download = (url, fileName) => {
  saveAs(url, fileName);
};