当前位置：首页 > news >正文

vue 使用jszip，file-saver下载压缩包，自定义文件夹名，文件名打包下载为zip压缩包文件，全局封装公共方法使用。

news 2025/8/5 16:44:46

记录一下后台管理全局封装一个压缩包下载方法，文件夹名自定义，文件名自定义，压缩包名自定义。

安装必要的库

npm install jszip
npm install file-saver

自定义一个公共方法全局注入

在这里插入图片描述

页面使用

在这里插入图片描述

        /** 下载按钮操作 */handleDownload() {const ids = this.ids;let selectFileList = this.dataList.filter(o => ids.includes(o.id));this.$MyUtil.jszipDown({arrFileObj: selectFileList, // 必传filePath: 'lineCodeImg', //文件下载路径字段 必传fileName: 'lineName,lineCode', //文件自定义名字 可以不穿})},

my-util.js

import JSZip from 'jszip'
import { saveAs } from 'file-saver'
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {/*** 在对象数组中找到一个属性值和参数相等的一条记录* @param {object} Obj 接受参数对象* arrFileObj 对象数组* filePath 文件下载路径字段* folderName 文件夹名字* fileName 文件自定义名字* jszipName 文件自定义名字* @returns */jszipDown(Obj) {//此方法后端返回文件流function getUrlFile(url) {return new Promise((resolve, reject) => {axios({method: 'post',headers: {'Authorization': 'Bearer ' + getToken(),'Content-Type': 'application/json; application/octet-stream'},responseType: 'blob',data: { url },url: process.env.VUE_APP_BASE_API + '/common/proxy/download'}).then(res => {resolve(res.data)}).catch(err => {reject(err.toString())})})};const zip = new JSZip()const promiseList = [];Obj.arrFileObj.forEach(file => {if (file) {let fName = ''if (Obj.fileName) {let format = file[Obj.filePath].split('.')format = format[format.length - 1]let nameL = Obj.fileName.split(',')let name = nameL.map(item=>file[item]).join('-')fName = name+'.'+format}else{fName = file[Obj.filePath].split('/')fName = fName[fName.length - 1]}const promise = getUrlFile(file[Obj.filePath]).then(data => {if (Obj.folderName) {zip.folder(file[Obj.folderName]).file(fName, data,{binary: true})} else {zip.file(fName, data,{binary: true})}});promiseList.push(promise);}});Promise.all(promiseList).then(res => {zip.generateAsync({ type: 'blob' }).then(data => saveAs(data, Obj.jszipName?Obj.jszipName:'文件压缩包.zip'))}).catch(err => {console.log(err);});}}