vue3导出excel表格

1.目的

导出excel表格，比如说是组件库里面的table的数据。

通过按钮绑定点击事件，导出如上效果的excel表格

2.准备

在项目终端下载所需的npm包，命令： yarn add exceljs    ， yarn add file-saver 

3.代码实现

//导入包实现效果
import ExcelJS from 'exceljs';
import FileSaver from 'file-saver';
//定义点击处罚的方法

const outExcelAll = () => {
    let Exceldata = [];
//datasource为表格内的数据，格式为数组包对象，对象内有需要展示的属性，（键值对）
    datasource.value.forEach(item => {
      Exceldata.push(item);
    });
    // 创建工作簿
    const _workbook = new ExcelJS.Workbook();
    // 添加工作表
    const _sheet1 = _workbook.addWorksheet('sheet1');
    // 设置表格内容
    _sheet1.columns = [
      { header: '支付方式', key: 'payWay', width: 16 },
      { header: '总收款', key: 'postingMoney', width: 18 },
    ];
//***********************
const _titleCell = _sheet1.getRow(1);
    // 设置第一行的高度
    _titleCell.height = 30;
    // 设置第一行的字体样式
    _titleCell.font = {
      name: '黑体',
      bold: true,
      size: 12,
      color: {
        argb: 'FF999999'
      }
    };
    // 设置第一行的对齐方式（水平垂直）
    _titleCell.alignment = {
      vertical: 'middle',
      horizontal: 'center'
    };
    //循环数组，将数组一条一条的添加到表格
    console.log(Exceldata);
    Exceldata.forEach(item => {
      console.log(item);
      _sheet1.addRow(item);
    });
    nextTick(() => {
      // 导出表格
      _workbook.xlsx.writeBuffer().then(buffer => {
        let _file = new Blob([buffer], {
          type: 'application/octet-stream'
        });
//可以设置导出表格的文件名
        FileSaver.saveAs(_file, '财务报表.xlsx');
      });
    });
}