前端导出 excel 表格
文中使用技术栈
vue3、 Ant Design Vue
导出表单、表格需要的插件
提示:需要下载两个插件:
npm install xlsx -S
npm install file-saver -S
如果是TS 还需要 还需要下载两个类型声明的文件
npm install @types/xlsx --save-dev
npm install @types/file-saver --save-dev
提示:我要导出的表单样式
一、表单代码实现
<a-button @click="export2Excel" type="primary">导出</a-button>
<div id="xlsx">
<a-table
:pagination="false"
:columns="columns"
:data-source="dataSource"
bordered
:rowClassName="setClass"
size="middle"
/>
<div style="margin-bottom: 30px"></div>
<a-table
:pagination="false"
:columns="payTypeAmountListColums"
:data-source="payTypeAmountList"
bordered
:rowClassName="setPayTypeAmountListClass"
size="middle"
/>
</div>
二、核心代码
/**
* @explain: 导出报表
*/
const export2Excel = () => {
let ws = XLSX.utils.table_to_book(document.querySelector('#xlsx'))
let wbout = XLSX.write(ws, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
// 自定义导出文件名
let excelname = `${tableTopDetail.channelName}日报表-${tableTopDetail.date}.xlsx`
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), excelname)
}
注意这个获取dom节点 这个很关键 文中是有一个 id 为 xlsx 的 div 的
document.querySelector('#xlsx')
最后导出的样子