vue 实现导出 Excel功能

下载依赖

npm install --save xlsx file-saver // 对应两个依赖

封装方法

例如，创建一个文件夹命名为 utils，再创建一个导出Excel的js文件exportExcel.js

import FileSaver from 'file-saver';
import * as XLSX from 'xlsx'
export default {
    // 导出Excel表格
    exportExcel(excelName, tableName) {
        //excelName表示生成excel的文件名     tableName表示表格的id
        var wb = XLSX.utils.table_to_book(document.querySelector(tableName))
        var wbout = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
            FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), excelName)
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
    }
};

全局引入

import exportExcel from "./utils/exportExcel";
Vue.prototype.exportExcelUtils = exportExcel ;

使用

.... html
<el-table
 id='exportExcelBox'
 :data="tableData"
 border
 style="width: 100%"
 highlight-current-row
 header-row-class-name="tableStyle"
 @sort-change="sortChange"
 @row-dblclick="rowDBClick"
 ></el-table>
....

当渲染的table数据中有操作按钮或者有一些不需要的字段的话，可以写一个打印模板，用作导出Excel功能

<!-- 导出 Excel 模板 -->
    <div class="mt20" id="exportExcelBox">
      <tr class="">
        <td>姓名</td>
        <td>病区</td>
        <td>床号</td>
        <td>年龄</td>
        <td>住院号</td>
        <td>科室</td>
        <td>会诊申请时间</td>
        <td>申请医生</td>
      </tr>
      <div class="data-none" v-if="!tableData.length">暂无数据</div>
      <tr
        v-else
        class="space-around"
        v-for="(item, index) in tableData"
        :key="index"
      >
        <td>{{ item.NAME }}</td>
        <td>{{ item.WARD_NAME }}</td>
        <td>{{ item.BED_NO }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.INP_NO }}</td>
        <td>{{ item.DEPT_NAME }}</td>
        <td>
          {{
            item.APPLICATION_DATE_TIME
              ? moment(item.APPLICATION_DATE_TIME).format("YYYY-MM-DD HH:mm:ss")
              : ""
          }}
        </td>
        <td>{{ item.APPLICATION_DOCTOR }}</td>
      </tr>
    </div>

//js ==> methods
exportExcels() {
    exportExcelUtils.exportExcel(excelName:"表名称",tableName:"#exportExcelBox")
}