vue使用jszip和file-save下载文件并打包；vue前端下载多个文件b并打包；

原创

已于 2022-11-21 10:25:26 修改 · 2.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2022-08-09 10:29:24 首次发布

在这里插入图片描述

场景： 一般是后端直接将多个文件打包好，前端调用下载地址下载打包；但是文件太多会导致下载接口时间过长和服务器爆掉；故采用前端先将多个文件下载然后进行打包；
注意点： 1.先获取所有下载的文件路径和包含后缀名的文件名 2.文件名称尽量不要太长，太长好像会出现压缩包.zip里的文件不是平铺开的，而是放在一个个文件夹内的。所以名称别太长。

一：引入插件分别是axios获取文件blob，jszip打包文件，file-saver将文件保存到本地

//下载依赖
// npm i axios, JSZip, FileSaver -s
import axios from "axios";
import JSZip from "jszip";
import FileSaver from "file-saver";

二：一般会先调一个接口获取共有哪些文件需要下载，包括名称和下载地址

<el-button type="primary" @click="downFileZip(fileDownArr)">打包下载</el-button>

// data中的下载变量，待下载的多个文件地址和名称。
fileDownArr: [
        {
   
    fileDownName: '非车驾驶证.jpeg', fileDownUrl: G_CGI_PHP.group.documentDownload + `?id=` + 'docde9edfb625464726bb51d68d5dbb05e6'