vue+elementui表格导出

htmlToExcel.js

import FileSaver from 'file-saver'
import XLSX from 'xlsx'const htmlToExcel = {getExcel(dom, title = '默认标题') {var excelTitle = titlevar wb = XLSX.utils.table_to_book(document.querySelector(dom))/* 获取二进制字符串作为输出 */var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })try {FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }),excelTitle + '.xlsx')} catch (e) {if (typeof console !== 'undefined') console.log(e, wbout)}return wbout}
}export default htmlToExcel

<template><div><!--导出按钮--><el-button type="primary" style="margin:20px;" @click="exportExcelSelect">导出Excel</el-button><el-inputstyle="width: 200px"placeholder="请输入搜索内容"v-model="inputSearch"><i slot="prefix" class="el-input__icon el-icon-search" @click="search()"></i></el-input><!--原始表格--><el-table:data="tableData"height="500px"fixed="left"@selection-change="handleSelectionChange"><el-table-columntype="selection"></el-table-column><el-table-columnprop="helpKeywordId"label="helpKeywordId"></el-table-column><el-table-columnprop="name"label="name"></el-table-column></el-table><!--预览弹窗表格--><el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow"><el-table :data="selectData" id="selectTable" height="380px"><el-table-columnprop="helpKeywordId"label="helpKeywordId"></el-table-column><el-table-columnprop="name"label="name"></el-table-column></el-table><div slot="footer" class="dialog-footer"><el-button type="primary" @click="exportExcel">确定保存</el-button></div></el-dialog></div>
</template><script>
import htmlToExcel from '@/utils/htmlToExcel'
import axios from 'axios'export default {name: 'ExcelPage',data() {return {inputSearch: '',// 表格数据tableData: null,// 表格中选中的数据selectData: [],selectWindow: false}},methods: {// 导出exportExcel() {htmlToExcel.getExcel('#selectTable', '导出的自定义标题')},// 显示预览弹窗exportExcelSelect() {if (this.selectData.length < 1) {this.$message.error('请选择要导出的内容！')return false}this.selectWindow = true},// 选中数据handleSelectionChange(val) {this.selectData = val},search() {}},created() {axios.get('http://localhost:9090/findAll').then((response) => {this.tableData = response.dataconsole.log(response.data)})}
}
</script><style>
</style>