下载依赖
npm install --save xlsx file-saver
封装方法
import FileSaver from 'file-saver';
import * as XLSX from 'xlsx'
export default {
exportExcel(excelName, tableName) {
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>
....
<!-- 导出 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>
exportExcels() {
exportExcelUtils.exportExcel(excelName:"表名称",tableName:"#exportExcelBox")
}