vue多个表格数据合并导出excel(sheetjs或exceljs)

最近公司有个需求每周要查看一次数据统计,页面有个四个表格内容
在这里插入图片描述
要求把四个表格的数据导出到一个excel里面,查了一下网上的导出excel方法,但都没有要把多个导出成一个excel的例子。
不过经过一番试验,目前试用了两种插件都能实现:

第一种SheetJs

(https://github.com/rockboom/SheetJS-docs-zh-CN/)
注意sheetjs免费版有的样式不能调整,收费版才可以,官方的说法是为了不让花钱提出开发样式功能需求的公司吃亏做出的限制。

安装SheetJs

npm install xlsx -s

还有一个吧生成的excel导出下载的FileSaver(这里两个插件都要用到)

npm install file-saver --save

首先创建工作薄后,如果是数组使用XLSX.utils.sheet_add_aoa将数组连续输入到工作薄不同单元格中

/* Initial row */
var ws = XLSX.utils.aoa_to_sheet([ "SheetJS".split("") ]);

/* Write data starting at A2 */
XLSX.utils.sheet_add_aoa(ws, [[1,2], [2,3], [3,4]], {origin: "A2"});

/* Write data starting at E2 */
XLSX.utils.sheet_add_aoa(ws, [[5,6,7], [6,7,8], [7,8,9]], {origin:{r:1, c:4}});

/* Append row */
XLSX.utils.sheet_add_aoa(ws, [[4,5,6,7,8,9,0]], {origin: -1});

如果是数组对象则使用XLSX.utils.sheet_add_json

/* Initial row */
var ws = XLSX.utils.json_to_sheet([
  { A: "S", B: "h", C: "e", D: "e", E: "t", F: "J", G: "S" }
], {header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: true});

/* Write data starting at A2 */
XLSX.utils.sheet_add_json(ws, [
  { A: 1, B: 2 }, { A: 2, B: 3 }, { A: 3, B: 4 }
], {skipHeader: true, origin: "A2"});

/* Write data starting at E2 */
XLSX.utils.sheet_add_json(ws, [
  { A: 5, B: 6, C: 7 }, { A: 6, B: 7, C: 8 }, { A: 7, B: 8, C: 9 }
], {skipHeader: true, origin: { r: 1, c: 4 }, header: [ "A", "B", "C" ]});

/* Append row */
XLSX.utils.sheet_add_json(ws, [
  { A: 4, B: 5, C: 6, D: 7, E: 8, F: 9, G: 0 }
], {header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: true, origin: -1});

然后直接导出就行了

import FileSaver from "file-saver";
import XLSX from "xlsx";

...
	getExcel(){
		let workbook= XLSX.utils.aoa_to_sheet([ "SheetJS".split("") ]);
		/* Write data starting at A2 */
		XLSX.utils.sheet_add_aoa(workbook, [[1,2], [2,3], [3,4]], {origin: "A2"});
		XLSX.utils.sheet_add_aoa(workbook, [[1,2], [2,3], [3,4]], {origin: "G2"});
		 let wopts = {
	        bookType: "xlsx",
	        bookSST: true,
	        type: "binary",
	        cellStyles: true
	      };
	     var wbout = XLSX.write(workbook, wopts);
		FileSaver.saveAs(
	        new Blob([s2ab(wbout)], { type: "application/octet-stream" }),
	        '使用情况.xlsx'
	    );
   },
   // 字符串转ArrayBuffer
   function s2ab(s) {
     var buf = new ArrayBuffer(s.length);
     var view = new Uint8Array(buf);
     for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
     return buf;
   }

第二种Exceljs

(https://github.com/exceljs/exceljs/blob/master/README_zh.md)

安装exceljs

npm install exceljs
npm install file-saver --save
<script>
const ExcelJS = require("exceljs");
import FileSaver from "file-saver";
export default {
  name: "usage",
  methods:{
  // 导出
    onExcels() {
      let valueDate = this.valueDate;
      let examExcels = this.examExcels; // 考试计划表格
      let spareCarExcels = this.spareCarExcels; // 备用车表格
      let heChangExcels = this.heChangExcels; // 合场表格
      let naturalExcels = this.naturalExcels; // 入籍表格
      const workbook = new ExcelJS.Workbook();
      workbook.creator = "使用情况";
      workbook.lastModifiedBy = "使用情况";
      workbook.created = new Date();
      workbook.modified = new Date();
      // 将工作簿日期设置为 1904 年日期系统
      workbook.properties.date1904 = true;
      const worksheet = workbook.addWorksheet("使用情况");
      worksheet.properties.defaultColWidth = 16; // 默认列宽
      worksheet.properties.defaultRowHeight = 16; // 默认行高
      // worksheet.columns = [ // 设置列宽
      //   { width: 16 },
      //   { width: 10 },
      //   { width: 16 },
      //   { width: 16 },
      //   { width: 16 },
      //   { width: 16 },
      //   { width: 16 },
      //   { width: 16 },
      //   { width: 16 },
      // ];
      //定义考试计划标题
      const Examrow = worksheet.getRow(1);
      Examrow.height = 50;
      const Examcell = worksheet.getCell('A1');
      worksheet.mergeCells('A1:F1');
      Examcell.value = '考试计划使用情况';
      Examcell.font = { name: '宋体', family: 4, size: 14, bold: true }; // 字体
      Examcell.alignment = { vertical: 'middle', horizontal: 'center' };//对齐
      // 考试计划
      worksheet.addTable({
        name: "examTable",
        ref: "A2",
        displayName: "考试计划",
        headerRow: true, // 在表格顶部显示标题
        filterButton: false, // 切换标题中的过滤器控件
        totalsRow: false, // 在表格底部显示总计
        style: {
          theme: "TableStyleLight8",
        },
        columns: [
          { name: "公司" },
          { name: "科目" },
          { name: "考试计划数" },
          { name: "计划学员数" },
          { name: "计划成绩录入数" },
          { name: "临考成绩录入数" },
        ],
        rows: examExcels,
      });
      //定义备用车标题
      const Sparecarrow = worksheet.getRow(examExcels.length + 5);
      Sparecarrow.height = 50;
      const Sparecarcell = worksheet.getCell(`A${examExcels.length + 5}`);
      worksheet.mergeCells(`A${examExcels.length + 5}:C${examExcels.length + 5}`);
      Sparecarcell.value = '备用车使用情况';
      Sparecarcell.font = { name: '宋体', family: 4, size: 14, bold: true }; // 字体
      Sparecarcell.alignment = { vertical: 'middle', horizontal: 'center' };//对齐
      // 备用车
      worksheet.addTable({
        name: "spareCarTable",
        displayName: "备用车",
        ref: `A${examExcels.length + 6}`,
        headerRow: true, // 在表格顶部显示标题
        filterButton: false, // 切换标题中的过滤器控件
        totalsRow: false, // 在表格底部显示总计
        style: {
          theme: "TableStyleLight8",
        },
        columns: [{ name: "公司" }, { name: "学员安排数" }, { name: "学员签到数" }],
        rows: spareCarExcels,
      });
      //定义合场在线缴纳情况标题
      const Hechangcell = worksheet.getCell(`E${examExcels.length + 5}`);
      worksheet.mergeCells(`E${examExcels.length + 5}:F${examExcels.length + 5}`);
      Hechangcell.value = '合场在线缴纳情况';
      Hechangcell.font = { name: '宋体', family: 4, size: 14, bold: true }; // 字体
      Hechangcell.alignment = { vertical: 'middle', horizontal: 'center' };//对齐
      // 合场在线缴纳情况
      worksheet.addTable({
        name: "heChangTable",
        displayName: "合场在线缴纳情况",
        ref: `E${examExcels.length + 6}`,
        headerRow: true, // 在表格顶部显示标题
        filterButton: false, // 切换标题中的过滤器控件
        totalsRow: false, // 在表格底部显示总计
        style: {
          theme: "TableStyleLight8",
        },
        columns: [{ name: "公司" }, { name: "缴费数" }],
        rows: heChangExcels,
      });
      // // 入籍数据
      const Naturalcell = worksheet.getCell(`H${examExcels.length + 5}`);
      worksheet.mergeCells(`H${examExcels.length + 5}:I${examExcels.length + 5}`);
      Naturalcell.value = '入籍数据';
      Naturalcell.font = { name: '宋体', family: 4, size: 14, bold: true }; // 字体
      Naturalcell.alignment = { vertical: 'middle', horizontal: 'center' };//对齐
      worksheet.addTable({
        name: "naturalTable",
        displayName: "入籍数据",
        ref: `H${examExcels.length + 6}`,
        headerRow: true, // 在表格顶部显示标题
        filterButton: false, // 切换标题中的过滤器控件
        totalsRow: false, // 在表格底部显示总计
        style: {
          theme: "TableStyleLight8",
        },
        columns: [{ name: "类型" }, { name: "数量" }],
        rows: naturalExcels,
      });
      workbook.xlsx.writeBuffer().then((buffer) => {
        // eslint-disable-next-line no-undef
        FileSaver.saveAs(
          new Blob([buffer], {
            type: "application/octet-stream",
          }),
          `${valueDate[0]}-${valueDate[1]}使用情况.xlsx`
        );
      });
    },
   } 

最终导出
在这里插入图片描述

评论 5 您还未登录,请先 登录 后发表或查看评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页

打赏作者

艾路菲尔

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值