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
    评论
很抱歉,我之前的回答有误,x-data-spreadsheet是基于JavaScript的电子表格库,而不是Vue组件。 以下是一个使用x-data-spreadsheet库实现Excel文件导入导出和可编辑单元格样式的示例代码: HTML模板代码: ``` <template> <div> <button @click="exportExcel">导出Excel文件</button> <input type="file" ref="file" style="display:none" @change="importExcel" /> <button @click="() => { this.$refs.file.click() }">导入Excel文件</button> <div ref="spreadsheet"></div> </div> </template> ``` JS代码: ``` <script> import Spreadsheet from 'x-data-spreadsheet' import 'x-data-spreadsheet/dist/xspreadsheet.css' export default { mounted() { const el = this.$refs.spreadsheet const options = { data: [], columns: [ { title: '姓名', field: 'name', width: 120 }, { title: '年龄', field: 'age', width: 80 }, { title: '性别', field: 'gender', width: 80 }, ], style: { bgcolor: '#f1f1f1', align: 'center', valign: 'middle', textwrap: true }, row: { len: 20, height: 30 } } this.spreadsheet = new Spreadsheet(el, options) }, methods: { async exportExcel() { const data = this.spreadsheet.getData() const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) const url = URL.createObjectURL(blob) const link = document.createElement('a') link.href = url link.download = 'excel.xlsx' link.click() }, async importExcel() { const file = this.$refs.file.files[0] const reader = new FileReader() reader.onload = async (event) => { const data = event.target.result const { arrayBuffer } = await import('xlsx') const workbook = arrayBuffer(data) const worksheet = workbook.Sheets[workbook.SheetNames[0]] const sheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) const headerRow = sheetData[0] const tableData = [] for (let i = 1; i < sheetData.length; i++) { const rowData = {} for (let j = 0; j < headerRow.length; j++) { const key = headerRow[j] rowData[key] = sheetData[i][j] } tableData.push(rowData) } this.spreadsheet.loadData(tableData) } reader.readAsArrayBuffer(file) } } } </script> ``` 这个示例中,我们使用了x-data-spreadsheet库来渲染一个电子表格。在mounted钩子函数中,我们创建了一个Spreadsheet对象,并将其挂载到了页面上的一个div元素上。我们指定了表格的数据、列定义、单元格样式和行高等选项。 导出Excel文件的方法是通过调用Spreadsheet对象的getData方法获取表格的数据,然后使用Blob对象将数据转换为Excel文件格式,并创建一个a标签下载文件。 导入Excel文件的方法是通过一个input元素来获取用户选择的文件,然后使用FileReader对象将文件读取为ArrayBuffer二进制格式。接下来,我们使用xlsx库解析文件数据,获取到表格数据后,我们将其转换为x-data-spreadsheet库所需的数据格式,并使用Spreadsheet对象的loadData方法加载数据。 希望这个示例能够对您有所帮助。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值