下载依赖
npm install --save xlsx file-saver // 对应两个依赖
封装方法
例如，创建一个文件夹命名为
utils，再创建一个导出Excel的js文件exportExcel.js文章来源：https://www.toymoban.com/news/detail-525841.html
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功能文章来源地址https://www.toymoban.com/news/detail-525841.html
<!-- 导出 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")
}
到了这里，关于vue 实现导出 Excel功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
