批量导出-先打包后下载为zip

最新推荐文章于 2025-09-15 11:44:23 发布

原创最新推荐文章于 2025-09-15 11:44:23 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #批量下载 #打包下载

js 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何通过JavaScript库jszip和file-saver来实现在网页中批量导出文件，并将其打包成zip文件供用户下载。

批量导出需要先将文件组逐个添加打包，然后下载
安装插件 jszip，file-saver

import FileSaver from 'file-saver'
import JSZip from 'jszip'
exportConfig(){
	const data = this.detailForm
	const zipname = '下载'
	const zip = new JSZip()
	const cache = {}
	data.forEach(item=>{
		const filename = `${item.name}.txt`  // 自定义文件名
		const filedata = item.data			 // 自己设置文件内容
		zip.file(filename, filedata, { binary: true})  // 逐个添加文件
		cache[filename] = filedata
		console.log(cache)   // 将要打包的文件
	})
	zip.generateAsync({
		type:'blob'
	}).then((blob) => {
		FileSaver.saveAs(blob, `${zipname}.zip`)
	},(err)=>{
		alert('导出失败')
	})
}