数据表格导出execl(用excel.js和file-saver插件实现表格导出)

1,首先,确保您已安装exceljsfile-saver插件。您可以使用npm(Node.js包管理器)来安装它们:

npm install exceljs file-saver
2,在您的vue文件中,导入所需的库和模块:

import * as ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';
 

3,准备要导出的表格数据。根据您的数据结构和需求,创建一个包含数据的数组。

4,创建一个Excel工作簿对象并设置相关属性:

const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');
worksheet.columns = [
  { header: '项目名称', key: 'projectName', width: 15 },
  { header: '分包名称', key: 'subpackageName', width: 15 },
  { header: '授标顺序', key: 'awardOrder', width: 15 }
];
此处假设您的表格具有三列,并设置了标题和列宽。

5,将数据添加到工作表中:

const data = [
  { projectName: '项目1', subpackageName: '分包1', awardOrder: 1 },
  { projectName: '项目2', subpackageName: '分包2', awardOrder: 2 },
  // 添加更多数据...
];

data.forEach((row) => {
  worksheet.addRow(row);
});
根据您的数据结构,使用worksheet.addRow(row)逐行添加数据到工作表

6,导出Excel文件并保存

const buffer = await workbook.xlsx.writeBuffer();
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
saveAs(blob, '导出表格.xlsx');
使用workbook.xlsx.writeBuffer()将工作簿转换为字节数组缓冲区。然后,使用Blob将缓冲区创建为二进制对象。最后,使用saveAs函数保存二进制对象为Excel文件。

完整的示例代码如下:

import * as ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

const exportToExcel = async () => {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet1');
  worksheet.columns = [
    { header: '项目名称', key: 'projectName', width: 15 },
    { header: '分包名称', key: 'subpackageName', width: 15 },
    { header: '授标顺序', key: 'awardOrder', width: 15 }
  ];

  const data = [
    { projectName: '项目1', subpackageName: '分包1', awardOrder: 1 },
    { projectName: '项目2', subpackageName: '分包2', awardOrder: 2 },
    // 添加更多数据...
  ];

  data.forEach((row) => {
    worksheet.addRow(row);
  });

  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  saveAs(blob, '导出表格.xlsx');
};

exportToExcel();
请根据您的具体需求和数据结构进行相应的修改和调整。希望这可以帮助到您!
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
1.添加依赖 在pom.xml文件中添加以下依赖: ``` <!-- Excel导出依赖 --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>4.1.0</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>4.1.0</version> </dependency> ``` 2.编写控制器 在控制器中编写导出Excel的方法: ``` @GetMapping("/export") public void export(HttpServletResponse response) throws IOException { // 1.创建工作簿 XSSFWorkbook workbook = new XSSFWorkbook(); // 2.创建工作表 XSSFSheet sheet = workbook.createSheet("用户信息"); // 3.创建行 XSSFRow row = sheet.createRow(0); // 4.创建单元格 XSSFCell cell = row.createCell(0); cell.setCellValue("用户名"); cell = row.createCell(1); cell.setCellValue("年龄"); cell = row.createCell(2); cell.setCellValue("性别"); // 5.写入数据 List<User> userList = userService.getUserList(); for (int i = 0; i < userList.size(); i++) { row = sheet.createRow(i + 1); User user = userList.get(i); row.createCell(0).setCellValue(user.getName()); row.createCell(1).setCellValue(user.getAge()); row.createCell(2).setCellValue(user.getGender()); } // 6.设置响应头 response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment;filename=userInfo.xlsx"); // 7.输出Excel OutputStream outputStream = response.getOutputStream(); workbook.write(outputStream); outputStream.flush(); outputStream.close(); } ``` 3.测试 启动SpringBoot应用,访问导出Excel的接口,即可下载Excel文件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值