一个自定义表头的Vue导出json数据为excel,vue2/vue3通用

zhuanbike 2023-8-16 244

1、安装:xlsx

cnpm i xlsx


2、封装一个excel.js

import * as XLSX from "xlsx";
//三个参数依次是原始json数据,要输出的文件名,表头对应关系
export function export_excel(excelData, fileName, header) {
  const formattedHeader = header.map(item => item.value);
  
  const formattedData = excelData.map(item => {
    let obj = {};
    header.forEach(headerItem => {
      obj[headerItem.value] = item[headerItem.key];
    });
    return obj;
  });
  
  const sheet = XLSX.utils.json_to_sheet(formattedData, { header: formattedHeader });
  
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, sheet, '表1');
  XLSX.writeFile(wb, fileName + ".xlsx");
}

3、在使用页面引用:

import {export_exce } from "@/utils/excel";

4、自定义表头

xlsxHeader:[{
key: 'unit',
value: '部门' // 自定义部门表头名称
}, {
key: 'name',
value: '姓名'
}, {
key: 'holiday',
value: '节假日'
}, {
key: 'hMoney',
value: '计费'
}, {
key: 'restday',
value: '休息日'
}, {
key: 'rMoney',
value: '计费'
}, {
key: 'duty',
value: '工作日'
}, {
key: 'dMoney',
value: '工作日计费'
}, {
key: 'allMoney',
value: '总计'
}],

5、调用函数

exData() {
export_excel(this.data, "加班统计表", this.xlsxHeader);//其中this.data为json数据,自己可以根据后端返回接口进行处理
},

6、页面引用

<a-button style="float:right;" type="primary" @click="exData();">导出本页数据</a-button>


最新回复 (0)
发新帖