前端导出xlsx

依赖安装（file-saver、xlsx）

npm install file-saver --save-dev
npm install xlsx --save-dev

导出封装

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

exportExcel(id, title) { // 参数 id:dom；title:导出的文件名
  /* generate workbook object from table */
  const wb = XLSX.utils.table_to_book(document.querySelector(id));
  /* get binary string as output */
  const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), title)
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout)
  }
  return wbout;
}

调用

<template>
  <!-- 点击事件 设置参数('#outTable', '请假统计.xlsx') -->
  <el-button type="primary" size="small" @click="exportExcel('#outTable', '请假统计.xlsx')">导出</el-button>
  <!-- 设置table的 id="outTable" -->
  <el-table :data="tableList" id="outTable"></el-table>
</template>

<script>
  // 引用封装的函数
</script>

---

遇到问题

在使用中，有导出身份证号的需求，导出来的身份证号字段会失去精度(后几位为0)

解决方法

设置转换成excel时，使用原始的格式
XLSX.utils.table_to_book(document.querySelector(id), { raw: true })

exportExcel(id, title) {
  /* generate workbook object from table */
  let xlsxParam = { raw: true }; // 转换成excel时，使用原始的格式
  const wb = XLSX.utils.table_to_book(document.querySelector(id),xlsxParam);
  /* get binary string as output */
  const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), title)
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout)
  }
  return wbout;
}