前端 文件打包下载

如果需要下载打包后的压缩文件，解决方案有多种，可以在服务端打包后返回下载url，前端通过<a>标签下载，亦或是前端去请求每个文件，打包后再下载，为了减轻服务端压力，这次需要在WEB端实现多文件的打包下载。

安装依赖

jszip

JSZip 是一个用于创建、读取和编辑 .zip 文件的 javascript 库，具有可爱而简单的 API。
https://stuk.github.io/jszip/

var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type:"blob"})
.then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});

file-saver

FileSaver.js 是在客户端保存文件的解决方案，非常适合在客户端生成文件的 Web 应用程序
https://github.com/eligrey/FileSaver.js#readme

import { saveAs } from 'file-saver';

// Saving text
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");


// Saving URLs
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

代码实现

template

<el-button class="button success" @click="downloadPhoto">批量下载</el-button>

script

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


export default {
  name: 'Download',
  data() {
    return {
      fileList:[
        'https://xxx/xxx/xxx.jpg',
        'https://xxx/xxx/xxx.jpg',
        'https://xxx/xxx/xxx.mp4',
      ]
    }
  },
  methods: {
    // 批量下载
    downloadPhoto() {
      // 获取文件流
      const getFile = (url) => {
        return new Promise((resolve, reject) => {
          axios
            .get(url, {
              responseType: 'arraybuffer',
            })
            .then((res) => {
              resolve(res.data)
            })
            .catch((err) => {
              reject(err.toString())
            })
        })
      }
      // 创建JSZip实例
      const zip = new JSZip()
      // promise对象
      const promises = []
      // 创建下载列表
      const downList = this.fileList
      // 生成每个文件
      downList.forEach((v) => {
        // 获取文件名
        const fileName = v.split('/').slice(-1)
        // 生成promise
        const promise = getFile(v).then((res) => {
          zip.file(fileName, res)
        })
        promises.push(promise)
      })
      // 异步处理
      Promise.all(promises).then(() => {
        // 生成二进制流
        zip
          .generateAsync({
            type: 'blob',
          })
          .then((content) => {
            saveAs(content, this.order.task.title)
          })
      })
    },
  }
}


</script>