导出下载多个Excel文件并打包成zip文件

本文介绍了一种在Web应用中实现批量导出Excel文件的方法,并将这些文件压缩为一个ZIP包供用户下载。该方案涉及前端页面设计、JavaScript交互逻辑及后端处理流程。

导出下载单个Excel也许简单,但是有的时候也会用到下载多个excel并且打包成zip文件的情况,最近遇到了,现在简单整理一下!

1、ftl文件

 <a class="btn  " type="button" onclick="exportSelectExcel()"><i class="fa fa-share-square-o text-olive"> </i> 导出</a>

	  <table id="annualPlanTable" 
	        	class="table table-striped table-hover"
	        	data-sort-name="createTime"
		        data-order-name="desc"
		        data-toggle="table"
		        data-url="listManage_sgJSONData"
		        data-query-params="getBootstrapTableParams"
		        data-side-pagination="server"	
		        data-pagination="true"
	        	>
		<thead>
			<tr>
		<span style="white-space:pre">	</span><th data-checkbox="true"></th>
			<th data-field="planName" data-formatter="planNameFormatter">名称</th>
			<th data-field="planNo">计划编号</th>
			<th data-field="version">版本编号</th>
			<th data-field="commandName">指挥部</th>
			<th data-field="sectionName">标段</th>
			<th data-field="createTime" data-formatter="GT.BootStrap.formatToYYYYMMDD">提报时间</th>
			<th data-field="entrPsnName">提报人</th>
			<th data-field="status">审核状态</th>
			<th data-field="operation" data-formatter="operationFormatter">操作</th>
			</tr>
		</thead>
	  </table>

2、js文件

//导出中
function exportSelectExcel(){
	var checkedData = GT.BootStrap.checkDataIdsToBootstrap("annualPlanTable");
	if (checkedData==0) { gAlert("请至少择一个要导出的项目","友情提示");return;}
	exportPlanMaterialExcelById(checkedData);
}
function exportPlanMaterialExcelById(checkedData){
	if(checkedData){
		var url = BASEUrl+"exportPlanMaterialExcelById?ids="+checkedData;
		window.open(url);
	}
}

3、controller方法

import com.gt.util.common.ExcelImport;
import com.gt.util.common.FileDownloadBean;
import com.gt.util.common.FileDownloadUtil;
import com.gt.util.common.FileDownloadZipUtil;

/**
	 * 导出需求计划中的物资信息
	 * @param request
	 *            中ids 每一个需求计划导出一个excel
	 * @param request
	 * @param response
	 * @throws IOException
	 */
	@RequestMapping(value = "/exportPlanMaterialExcelById")
	public void exportPlanMaterialExcelById(@RequestParam(value = "ids") String ids,
			HttpServletRequest request, HttpServletResponse response)
			throws IOException {
		try {
			List<FileDownloadBean> fileDownloadBeans=new ArrayList<FileDownloadBean>();
			List<Long> idArry=stringToLongList(ids);
			for (Long id : idArry) {
				FileDownloadBean fileDownloadBean=<span style="color:#ff0000;">createFileDownloadBean</span>(request, response, id, null);
				fileDownloadBeans.add(fileDownloadBean);
			}
			FileDownloadZipUtil.downLoadExcelToZip(fileDownloadBeans,"全线年度需求计划",request, response);
		} catch (Exception e) {
			log.error("全线/需求计划管理页-导出需求计划中的物资信息报错。" + e.getMessage(),e);
		}
	}


/**
	 * 
	 * <构造下载所需的javabean> 
	 * <功能详细描述>
	 * @author XXX
	 * @date 2016年5月28日
	 * @param request
	 * @param response
	 * @param blngsPtbId
	 * @param searchMaterialParams
	 * @return
	 */
	@SuppressWarnings({"rawtypes" })
	private FileDownloadBean  <span style="color:#ff0000;">createFileDownloadBean</span>(HttpServletRequest request,HttpServletResponse response,Long blngsPtbId,String searchMaterialParams){
	    FileDownloadBean fileDownloadBean=new FileDownloadBean();
		try {  
			    DemandSupplyPlanVO demandSupplyPlanVO =  demandSupplyPlanService.getById(blngsPtbId);
				BootstrapPager pager=new BootstrapPager();
				pager.setlimit(Integer.MAX_VALUE);
				List<DemandSupplyMaterialVO> demandSupplyMaterials=demandSupplyMaterialService.findByBlngsPtbId(pager, blngsPtbId, searchMaterialParams).getRows();
				String path = null;
				if(demandSupplyPlanVO.getPlanTypeCde().getCode()==PlanType.All.getCode()){
					path = request.getServletContext().getRealPath("/excel") + "/"+EXCEL_TEMPLATE_FILENAME_ALL+".xls";
				}else if(demandSupplyPlanVO.getPlanTypeCde().getCode()==PlanType.YEAR.getCode()){
					path = request.getServletContext().getRealPath("/excel") + "/"+EXCEL_TEMPLATE_FILENAME_YEAR+".xls";
				}
				String fileName = demandSupplyPlanVO.getSectionName()+"标段的"+demandSupplyPlanVO.getPlanName()+"物资";
				fileDownloadBean.setFileName(fileName);
				fileDownloadBean.setPath(path);
				fileDownloadBean.setRs(demandSupplyMaterials);
				fileDownloadBean.setExtendsName(".xls");
			} catch (Exception e) {
				log.error("全线年度需求计划-导出物资报错。" + e.getMessage(),e);
			}
		return fileDownloadBean;
		}

4、需要的jar文件,以及xls文件

打包zip下载Excel文件 (提取码:5188)


<think>我们已知在Vue 3中可以使用xlsx库来导出Excel文件。现在需要实现多个Excel文件打包下载,即生一个压缩包(如zip格式)包含多个Excel文件。 由于xlsx库本身不提供压缩功能,我们需要借助另一个库来实现压缩,例如jszip。 步骤: 1. 安装xlsx和jszip库。 2. 在Vue组件中,创建一个方法用于生Excel文件(使用xlsx),然后将多个Excel文件添加到JSZip实例中。 3. 使用JSZip压缩触发下载。 具体实现步骤: 1. 安装依赖: npm install xlsx jszip file-saver 2. 在Vue组件中引入所需的库: import * as XLSX from 'xlsx'; import JSZip from 'jszip'; import { saveAs } from 'file-saver'; 3. 定义导出方法,例如我们有一个数据数组,每个元素代表一个工作表的数据,我们想将每个工作表保存为一个单独的Excel文件,然后打包下载。 4. 实现步骤: a. 创建一个JSZip实例。 b. 遍历需要导出多个Excel文件的数据(假设我们有多个数据数组,每个数组对应一个Excel文件,或者我们可以用一个对象来存储多个工作表的数据,但这里要求多个文件,所以每个文件单独生)。 c. 对每个数据数组,使用XLSX.utils.json_to_sheet转换工作表,然后新建工作簿添加工作表,最后使用XLSX.write生二进制字符串。 d. 将每个Excel文件(二进制字符串)添加到JSZip实例中,指定文件名(如`file1.xlsx`, `file2.xlsx`)。 e. 使用JSZip压缩包,然后通过file-saver的saveAs方法保存压缩包。 以下是示例代码: ```javascript import * as XLSX from 'xlsx'; import JSZip from 'jszip'; import { saveAs } from 'file-saver'; export default { methods: { // 假设multipleData是一个数组,每个元素是一个对象,包含文件名和该文件的数据 // 例如:[{ fileName: 'file1.xlsx', data: [...] }, { fileName: 'file2.xlsx', data: [...] }] async exportMultipleToZip(multipleData) { const zip = new JSZip(); // 遍历每个文件的数据 multipleData.forEach((fileData, index) => { // 创建工作簿 const wb = XLSX.utils.book_new(); // 将数据数组转换工作表 const ws = XLSX.utils.json_to_sheet(fileData.data); // 将工作表添加到工作簿,指定工作表名称(这里用Sheet1,你也可以自定义) XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 生Excel文件的二进制数据(类型为string) const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); // 将二进制数据转换为Uint8Array const uint8Array = new Uint8Array(excelBuffer); // 添加到zip文件zip.file(fileData.fileName, uint8Array); }); // 生zip文件 const content = await zip.generateAsync({ type: 'blob' }); // 使用file-saver保存 saveAs(content, 'excel-files.zip'); } } } ``` 注意:这里使用了`XLSX.write`的`array`类型,然后转换为Uint8Array。也可以使用`binary`类型,但要注意JSZip添加文件时支持的数据类型。 如果我们在组件中调用该方法,需要传入一个数组,每个元素包含文件名和对应的数据。 例如: ```javascript this.exportMultipleToZip([ { fileName: 'data1.xlsx', data: this.data1 }, { fileName: 'data2.xlsx', data: this.data2 } ]); ``` 这样就会生一个名为`excel-files.zip`的压缩包,里面包含两个Excel文件。 另外,如果数据量很大,可以考虑使用异步生显示进度,但上述代码已经可以满足基本需求。 引用说明:我们参考了xlsx和jszip的常规用法,结合了Vue 3的组件方法实现[^1][^2][^3][^4]。 相关问题: 1. 如何将多个工作表放在同一个Excel文件中? 2. 如何使用JSZip实现带目录结构的压缩包? 3. 如何在Vue 3中实现大文件导出压缩? </think>### Vue 3中使用xlsx库实现多Excel文件打包下载的方法 在Vue 3中实现多个Excel文件打包下载,需要结合`xlsx`生Excel文件,再使用`JSZip`进行压缩打包。以下是具体实现步骤: --- ### 1. 安装依赖 ```bash npm install xlsx jszip file-saver ``` --- ### 2. 核心实现代码 在Vue组件中添加以下方法: ```javascript import * as XLSX from 'xlsx'; import JSZip from 'jszip'; import { saveAs } from 'file-saver'; export default { methods: { // 生单个Excel文件(返回二进制数据) generateExcelFile(data, fileName) { const workbook = XLSX.utils.book_new(); const worksheet = XLSX.utils.json_to_sheet(data); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); return XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); }, // 打包下载多个Excel async downloadMultipleExcel(files) { const zip = new JSZip(); // 遍历文件列表 for (const [index, file] of files.entries()) { const { data, fileName } = file; const excelData = this.generateExcelFile(data, fileName); zip.file(`${fileName}.xlsx`, excelData); } // 生压缩下载 const content = await zip.generateAsync({ type: 'blob' }); saveAs(content, 'excel-bundle.zip'); } } } ``` --- ### 3. 组件调用示例 ```html <template> <button @click="handleDownload">打包下载Excel</button> </template> <script> export default { data() { return { // 示例数据(多个文件的数据) fileList: [ { fileName: '销售数据', data: [ { id: 1, product: '商品A', amount: 100 }, { id: 2, product: '商品B', amount: 200 } ] }, { fileName: '用户列表', data: [ { id: 1, name: '张三', age: 25 }, { id: 2, name: '李四', age: 30 } ] } ] } }, methods: { handleDownload() { this.downloadMultipleExcel(this.fileList); } } } </script> ``` --- ### 关键点说明 1. **文件** 使用`XLSX.utils.json_to_sheet()`将JSON数据转为工作表,通过`XLSX.write()`生二进制数组[^1][^2]。 2. **压缩打包** - `JSZip`创建虚拟压缩包 - `zip.file()`将Excel二进制数据添加到压缩包 - `generateAsync()`生Blob格式的压缩包 3. **文件下载** `file-saver`的`saveAs()`方法触发浏览器下载压缩包[^3]。 4. **文件名规范** 确保文件名以`.xlsx`结尾(如`销售数据.xlsx`),避免浏览器解析错误[^2]。 --- ### 注意事项 1. **大数据量优化** 超过万行数据时,建议使用`web worker`防止界面卡顿。 2. **浏览器兼容性** `Blob`和`URL.createObjectURL`兼容现代浏览器,如需支持IE需添加polyfill。 3. **文件命名冲突** 在`zip.file()`中确保文件名唯一,避免压缩包内文件覆盖。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值