vue 使用Export2Excel导出表格,导出多个sheet,合并单元格,修改样式

安装

 npm i xlsx
 npm i xlsx-style

xlsx-style安装后使用会报错

This relative module was not found:  * ./cptable in ./node_modules/xlsx-style/dist/cpexcel.js

需要在vue.config.js添加设置来解决报错

configureWebpack:{
	externals: [{
     './cptable': 'var cptable'
    }]
}
import { exportSheetExcel } from "@/utils/export/exportExcelFile";
// 数据形式
let header = ["学号","姓名","性别","出身年月"]
let filter = ["studentId","name","sex","birth"]
let data1 = [
    [
        {studentId:'A001',name:"张三",sex:"男",birth:"2020-02-14"},
        {studentId:'A002',name:"张三",sex:"男",birth:"2020-02-14"},
        {studentId:'A003',name:"张三",sex:"男",birth:"2020-02-14"},
        {studentId:'A004',name:"张三",sex:"男",birth:"2020-02-14"}
    ],
    [
        {studentId:'B001',name:"张三",sex:"男",birth:"2020-02-14"},
        {studentId:'B002',name:"张三",sex:"男",birth:"2020-02-14"},
        {studentId:'B003',name:"张三",sex:"男",birth:"2020-02-14"},
        {studentId:'B004',name:"张三",sex:"男",birth:"2020-02-14"}
    ]
]
let sheets = ["一(1)班","一(2)班"]
exportSheetExcel(
  data1,
   header,
   filter,
   sheets,
   '一年级学生表'
 );



// utils/export/exportExcelFile.js 添加方法
import {
	export_json_to_excel,
	export_json_to_multistage_excel,
	export_json_to_sheet_excel
} from '@/utils/export/vendor/Export2Excel';
export function exportSheetExcel(listDataList, tHeade, filter, sheetNames, name) {
	//参数listDataList为表格数据
	//参数name为导出文件名
	//参数tHeadeList为表格表头
	//参数filterList为表格字段
	// 导出时添加日志信息
	// addLogs('导出', '导出' + name)
	require.ensure([], () => {
		var tHeader = tHeade;
		var filterVal = filter;
		const list = listDataList; //把data里的tableData存到list
		//execl文件处理

		const data = list.map(element => {
			return element.map(v => filterVal.map(j => v[j]))
		});
		console.log(tHeader, data, sheetNames, name)
		export_json_to_sheet_excel(tHeader, data, sheetNames, name);
	})
}
// /utils/export/vendor/Export2Excel.js 添加方法
require('script-loader!file-saver');
require('./Blob.js');
require('script-loader!xlsx/dist/xlsx.core.min');
import XLSX from "xlsx-style";
......
export function export_json_to_sheet_excel(th, jsonData,sNames,defaultTitle) {

    var data = jsonData;
    //添加表头标题
    for (var i = 0; i < data.length; i++) {
      data[i].unshift(th)
    }
    // console.log("data",data)
    //这里是定义sheet的名称 有几个sheet就加几个 ["Sheet1","Sheet2"]
    var ws_name = sNames;

    var wb = new Workbook(),ws=[];
    //数据转换
    for (var j = 0; j < data.length; j++) {
      ws.push(sheet_from_array_of_arrays(data[j]))
    }

    /* add worksheet to workbook */
    //生成多个sheet
    for (var k = 0; k < data.length; k++) {
      wb.SheetNames.push(ws_name[k])
      wb.Sheets[ws_name[k]] = ws[k]
    }
    
    // 需要设置样式的sheet
	var dataInfo = wb.Sheets[wb.SheetNames[0]];
    var tableTitleFont = {
        font: {
            name: "微软雅黑", //字体
            sz: 18, //字体大小
        },
        alignment: {//居中和换行
            horizontal: "center",
            vertical: "center",
            wrapText: 1,
            indent: 0
        },
    }
    var tableColumnFont = {
        font: {
            name: "微软雅黑", //字体
            sz: 11, //字体大小
            bold: true,
        },
        alignment: {//居中和换行
            horizontal: "center",
            vertical: "center",
            wrapText: 1,
            indent: 0
        },
    }
    //给A1添加样式
    dataInfo["A1"].s = tableTitleFont;
    // 匹配第2行,修改样式
    let regexColumn = /[A-Z]2$/;
    for (var b in dataInfo) {
        if (regexColumn.test(b)) {
            dataInfo[b].s = tableColumnFont;
        }
    }
	// 设置单元格合并,将需要合并的放入数组中
	let merges = [ 'A1:B1','C2:C10' ]
	if (merges.length > 0) {
        if (!ws['!merges']) ws['!merges'] = [];
        merges.forEach(item => {
            ws['!merges'].push(XLSX.utils.decode_range(item))
        })
    }


    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
    var title = defaultTitle || '列表'
    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
} 

在这里插入图片描述

参考地址:
在VUE中使用Export2Excel导出表格,导出多个sheet

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值