前端压缩并下载文件

112 阅读1分钟

前言

要想压缩并下载文件,要用到 file-saver、jszip、axios 等包

实现

直接贴上代码,下面的代码可以封装为一个 js 文件,直接使用。

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

/*
打包、压缩并下载文件,zip 后缀名
fileArr,示例值: [ { url: 'http://xxx.png' }, { url: 'http://xxx.png' }, ]

zipName,压缩文件名名称

zipFolder,压缩文件里面的文件夹名称,没有传入,则不使用文件夹包裹内容

*/

export default function (fileArr, zipName='附件', zipFolder) {

  if (!fileArr || fileArr.length === 0) {

    throw Error('fileArr 参数(文件列表)不能为空')

  }

  const zip = new JSZip()

  const promises = []

  let folder = null

  if (zipFolder) {

    folder = zip.folder(zipFolder)

  }

  


  fileArr.forEach(item => {

    let url = item.url

    const fileName = url.split('/').slice(-1)

    let promise = getFile(url).then(fileRes => {

      if (folder) {

        folder.file(fileName, fileRes)

      } else {

        zip.file(fileName, fileRes)

      }

    })

    promises.push(promise)

  })

  


  Promise.all(promises).then(() => {

    zip.generateAsync({

      type: 'blob'

    }).then(content => {

      saveAs(content, zipName)

    })

  })

}

  


const getFile = (url) => {

  return new Promise((resolve, reject) => {

    axios.get(url, {

      responseType: 'arraybuffer'

    }).then(res => {

      resolve(res.data)

    }).catch(err => {

      reject(err.toString())

    })

  })

}

参考