vue +xlsx+exceljs 导出excel文档

发布于:2025-05-07 ⋅ 阅读:(27) ⋅ 点赞:(0)

实现功能:分标题行导出数据过多,一个sheet表里表格条数有限制,需要分sheet显示。

步骤1:安装插件包

npm install exceljs

npm install xlsx

步骤2:引用包

    import XLSX from 'xlsx';
    import ExcelJS from 'exceljs';

步骤3:举例按关键代码说明

//通用方法
async xlsxExport(titles,columns,data,pageSize)
		{
				let workbook = new ExcelJS.Workbook();				
				let pageNo = Math.ceil(data.length*1.0/pageSize);
				for(var p=0;p<pageNo;p++)
				{
                  //创建Sheet表
				  const worksheet = workbook.addWorksheet('Sheet'+(p+1));				  
				  
				  for(let t=1;t<=titles.length;t++)
				  { 
                     //判断单元格是否已合并
				     if(!worksheet.getRow(t).getCell(1).isMerged)
				     {
				     worksheet.mergeCells( t, 0 ,t, columns.length );
					 	  
					 }
                     //合并单元格填充值
					 worksheet.getRow(t).getCell(1).value=titles[t-1];
				
                     //单元格增加样式
					 if(t==1)
				     {
				        worksheet.getRow(t).getCell(1).alignment = { 
				          vertical: 'middle', 
				          horizontal: 'center' 
				        };
						worksheet.getRow(t).getCell(1).font = { bold: true, size: 16 };
				     }
				     else
				     {				
					  
				       worksheet.getRow(t).getCell(1).alignment = {
				         vertical: 'middle', 
				         horizontal: 'left' 
				       };
				     }
				    }
					//填充标题列
					worksheet.addRow(columns);
					let pdata = [];
                    //组织当前sheet的数据结构
					data.forEach(item=>{
						if(item[0]>=p*pageSize && item[0]<=(p+1)*pageSize)
						{
							pdata.push(item);
						}
					});
					worksheet.addRows(pdata);
				  }
					//所有sheet填充完,写入xlsx文件并下载
				      const buffer = await workbook.xlsx.writeBuffer();
				      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
				      // 创建下载链接
				      const url = URL.createObjectURL(blob);
				      const link = document.createElement('a');
				      link.href = url;
				      link.download = titles[0]+".xlsx";
				      document.body.appendChild(link);
				      link.click();
				      document.body.removeChild(link);
				      URL.revokeObjectURL(url);						
			 
		}

步骤4:举例应用

let str2 = `ROWS,A,B,C`;
let titles=["excel导出实例",`当前日期:${this.currTime}];
let columns=["序号","A对应的列标题","B对应的列标题","C对应的列标题"];
let data =[{[对应str2的值]},{[对应str2的值]}];//对应数据值
let pageSize = 1000;//对应sheet表显示条数
await this.xlsxExport(titles,columns,data,pageSize);


网站公告

今日签到

点亮在社区的每一天
去签到