jszip是什么?
jszip是 一个用于使用JavaScript创建,读取和编辑.zip文件的库
github源码地址:https://github.com/Stuk/jszip
官方文档:https://stuk.github.io/jszip
API文档: https://heltschl.org/_js/jszip/
jszip怎么使用?
将表格数据导出为zip压缩包(其中是.txt文件)
要导出的表格数据如下:
const data = [ { author: "Margaret", display_time: "1979-06-25 03:23:30", id: 1, timestamp: 448470722568, title: "Yiw Kfhxghnp Kscwspgot Csjwlao Qlt Hopmxn", }, { author: "郭宝", display_time: "2021-06-25 03:23:30", id: 1, timestamp: 448487542568, title: "测试", } ]
调用方法如下:
handleDownload() { this.downloadLoading = true import('@/vendor/Export2Zip').then(zip => { const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date'] const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] const list = this.list const data = this.formatJson(filterVal, list) zip.export_txt_to_zip(tHeader, data, this.filename, this.filename) this.downloadLoading = false }) }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }
Export2Zip.js 工具文件内容如下
/* eslint-disable */ import { saveAs } from 'file-saver' import JSZip from 'jszip' /* * 将表格数据导出为zip压缩包(其中是.txt文件) * */ export function export_txt_to_zip(th, jsonData, txtName, zipName) { const zip = new JSZip() const txt_name = txtName || 'file' const zip_name = zipName || 'file' const data = jsonData let txtData = `${th}\r\n` data.forEach((row) => { let tempStr = '' tempStr = row.toString() txtData += `${tempStr}\r\n` }) zip.file(`${txt_name}.txt`, txtData) zip.generateAsync({ type: "blob" }).then((blob) => { saveAs(blob, `${zip_name}.zip`) }, (err) => { alert('导出失败') }) }
效果图:

将树型数据导出为zip压缩包(其中包含文件或文件夹)
要导出的树型数据如下:
data: [{ id: 1, name: '位置', icon: 'icon-wenjianjia', type: '文件夹', size: '3MB', time: '2021/4/12 22:20', isSelect: false, collection: 1, isFile: 0, children: [ { id: 66, name: '收藏夹', icon: 'icon-shoucang1', type: '文件夹', size: '3MB', time: '2021/4/12 22:20', isSelect: false, collection: 0, isFile: 0, children: [] }, { id: 11, name: '我的文件', icon: 'icon-wenjianjia', type: '文件夹', size: '3MB', time: '2021/4/12 22:20', isSelect: false, collection: 0, isFile: 0, children: [{ id: 111, icon: 'icon-wenjianjia', name: '我的图片', type: '文件夹', size: '3MB', time: '2021/4/12 22:20', isSelect: false, collection: 0, isFile: 0, children: [] }] }, { id: 22, name: '共享文件', icon: 'icon-wenjianjia', type: '文件夹', size: '3MB', time: '2021/4/12 22:20', isSelect: false, collection: 0, isFile: 0, children: [{ id: 222, name: '2021年上学期英语讲义汇总', icon: 'icon-wenjianjia', type: '文件夹', size: '3MB', time: '2021/4/12 22:20', isSelect: false, collection: 0, isFile: 0, children: [{ id: 2223, icon: 'icon-txt', name: '2021年上学期英语.txt', type: '文件', size: '3MB', time: '2021/4/12 22:20', isSelect: false, collection: 0, isFile: 1 }] }] }, { id: 33, name: '员工文件', icon: 'icon-wenjianjia', type: '文件夹', size: '3MB', time: '2021/4/12 22:20', isSelect: false, collection: 0, isFile: 0, children: [{ id: 333, name: 'PPT文件', icon: 'icon-wenjianjia', type: '文件夹', size: '3MB', time: '2021/4/12 22:20', isSelect: false, collection: 0, isFile: 0, children: [{ id: 3333, icon: 'icon-ppt', name: '员工手册.ppt', type: '文件', size: '3MB', time: '2021/4/12 22:20', isSelect: false, collection: 0, isFile: 1 }] }] }, { id: 44, icon: 'icon-shanchu', name: '回收站', type: '文件夹', size: '3MB', time: '2021/4/12 22:20', isSelect: false, collection: 0, isFile: 0, children: [] }] }]
Export2Zip.js文件内容如下:
/* eslint-disable */ import { saveAs } from 'file-saver' import JSZip from 'jszip' /* * 将树型数据导出为zip压缩包(其中包含文件或文件夹) * */ export function export_file_to_zip( jsonData, zipName) { const zip = new JSZip() const zip_name = zipName || 'file' createFileOrFolder(zip,jsonData,'') zip.generateAsync({ type: "blob" }).then((blob) => { saveAs(blob, `${zip_name}.zip`) }, (err) => { alert('导出失败') }) } /* 递归创建文件夹或文件 参数一:new JSZip() 对象 参数二:对象数组 参数三:父路径 */ export function createFileOrFolder(zip, data,fatherPath) { for (let i = 0; i <data.length ; i++) { const object = data[i]; if (object.isFile === 1){ // 创建文件1 let folder = fatherPath + '/' + object.name; // 默认填充空数据 zip.file(folder, '') } else { // 创建文件夹1 let folder2 = fatherPath + '/'+object.name zip.folder(folder2) const data2 = object.children createFileOrFolder(zip,data2,folder2) } } }
调用方法如下:
downloadHandler() { this.downloadLoading = true import('@/vendor/Export2Zip').then(zip => { zip.export_file_to_zip(this.data, '我的压缩包') this.downloadLoading = false }) }
效果图:

将图片进行打包下载
要打包的图片base64数据如下:
R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=
Export2Zip.js 工具代码如下:
/* eslint-disable */ import { saveAs } from 'file-saver' import JSZip from 'jszip' /* * 将图片进行打包下载 * imageName 图片名称 例如:a.gif * imgBase64 图片base64数据,例如:R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs= * zipName 压缩包名称:例如:file * 注意:完整的base64图片数据为:data:image/gif;base64,R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs= 需要去除 data:image/gif;base64, 前缀在可以正常使用 * */ export function export_img_to_zip(imageName,imgBase64,zipName) { const zip = new JSZip() const image_name = imageName || 'a.gif' const zip_name = zipName || 'file' zip.file(image_name,imgBase64,{base64: true}) zip.generateAsync({ type: "blob" }).then((blob) => { saveAs(blob, `${zip_name}.zip`) }, (err) => { alert('导出失败') }) }
调用方式
downloadHandler() { this.downloadLoading = true import('@/vendor/Export2Zip').then(zip => { zip.export_img_to_zip('a.gif', 'R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=', '我的压缩包') this.downloadLoading = false }) console.log('downloadHandler:', selectData) }
效果图:
