Table导出excel表格

一、js导出

下载xlsx并在页面导入

npm install --save xlsx 

import * as XLSX from 'xlsx'

给<table>标签添加id属性

 <table ref="table" id="table" border="1" style="text-align: center; width: 100%; " cellspacing="0">    
          <tr v-for="(item, index) in ReportStore.Report" :key="index">
            <td>
              <div style="width: 150px;">{{ item.date }}</div>
            </td>
            <template v-for="x in item.children">
              <td>
                <div style="margin: 0 10px;">{{ x.流量计 }}</div>
              </td>
              <td>
                <div style="width: 100px;">{{ x.用气量 }} m³</div>
              </td>
            <td>
              <div style="color: #ee7e1d;width: 150px">{{ item.all }} m³</div>
            </td>
          </tr>
      </table> 

在相关点击按钮的触发函数添加以下

var workbook = XLSX.utils.book_new();
//在table上建立的id属性
var ws1 = XLSX.utils.table_to_sheet(document.getElementById('table'));
XLSX.utils.book_append_sheet(workbook, ws1, "Sheet1");
XLSX.writeFile(workbook, `${excel名称}.xlsx`);

二、ant+vue3分页导出Excel

(1) 安装依赖项

npm install --save xlsx file-saver

（2) 在页面引入

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

(3) Ant表格中的pageSize设置为变量

 <a-table ref="table" id="table" :pagination="{ pageSize: pageSizes, showSizeChanger: false }" :columns="columns"
        :data-source="datas" :rowClassName="addRowColor" :scroll="{ x: 1500 }">
      </a-table>

(4) 在点击按钮所要触发的函数

var pageSizes = ref(10)//默认每个页面多少数据

function ExcelTable() {
  pageSizes.value = datas.length //默认每个页面有所有数据
//设置一个定时器，解决异步问题
  setTimeout(() => {
        
    var wb = XLSX.utils.table_to_book(document.getElementsByTagName('table')[0]);
    var wbout = XLSX.write(wb, {
      bookType: "xlsx",
      bookSST: true,
      type: "array",
    })
    try {
      FileSaver.saveAs(
        new Blob([wbout], { type: "application/octet-stream" }), `${ReportStore.siteName}.xlsx`
      )
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, wbout);
    }
    //代码完成后，每个页面数据量恢复默认
    pageSizes.value = 10
    return wbout;
  }, 100)
}