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)
}
效果图：
