vue中纯前端下载表格，导出格式为.xlsx（使用前提是前端不分页，文末附上运行的demo可自行下载）

vue中纯前端下载表格，导出格式为.xlsx（使用前提是前端不分页，文末附上运行的demo可自行下载）

vue中纯前端下载表格，导出格式为.xlsx（使用前提是前端不分页，文末附上运行的demo可自行下载）

1.安装下载依赖

npm install --save xlsx file-saver
或
cnpm install --save xlsx file-saver

2.代码中导入两个安装的库

3.el-table中记住添加id选择器，因为后续通过id选择器获取表格结点

4.具体代码实现，下面代码是实现没有固定列的清空，也即el-table-column中没有fixed属性，

<template><div class="app-container"><el-button size="small" icon="el-icon-tickets" style="margin-bottom: 20px;" type="warning" @click="exportExcel">导出数据</el-button><el-table id="table" v-loading="listLoading" :data="list" element-loading-text="Loading" border fithighlight-current-row><el-table-column align="center" label="ID" width="95"><template slot-scope="scope">{{ scope.$index }}</template></el-table-column><el-table-column label="Title"><template slot-scope="scope">{{ w.title }}</template></el-table-column><el-table-column label="Author" width="110" align="center"><template slot-scope="scope"><span>{{ w.author }}</span></template></el-table-column><el-table-column label="Pageviews" width="110" align="center"><template slot-scope="scope">{{ w.pageviews }}</template></el-table-column><el-table-column class-name="status-col" label="Status" width="110" align="center"><template slot-scope="scope"><el-tag :type=&#w.status | statusFilter">{{ w.status }}</el-tag></template></el-table-column><el-table-column align="center" prop="created_at" label="Display_time" width="200"><template slot-scope="scope"><i class="el-icon-time" /><span>{{ w.display_time }}</span></template></el-table-column></el-table></div>
</template><script>
import { getList } from '@/api/table'
import FileSaver from 'file-saver';
import * as XLSX from 'xlsx'export default {filters: {statusFilter(status) {const statusMap = {published: 'success',draft: 'gray',deleted: 'danger'}return statusMap[status]}},data() {return {list: null,listLoading: true}},created() {this.fetchData()},methods: {//纯前端导出excel表格//导出spc数据表格exportExcel() {let now = new Date();let year = FullYear();let month = ("0" + (Month() + 1)).slice(-2);let day = ("0" + Date()).slice(-2);let hour = ("0" + Hours()).slice(-2);let minute = ("0" + Minutes()).slice(-2);let second = ("0" + Seconds()).slice(-2);let formattedTime = `${year}-${month}-${day} ${hour}：${minute}：${second}`; //获取当前时间，通过时间区分后续下载的文件，看个人意愿自定义添加标题信息let xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换，这样就可以解决时间格式乱码的问题let fix = document.querySelector('.el-table__fixed') // 判断是否有固定列,有则先移除,导出完成后再添加回去,否则会导致导出的表格错乱let exportTable;if (fix) {exportTable = XLSX.utils.table_to_book(document.querySelector('#table').removeChild(fix), xlsxParam); // 有固定列的时候，先移除固定列，导出完成后再添加回去document.querySelector('#table').appendChild(fix);  // 有固定列的时候，导出完成后再添加回去} else {exportTable = XLSX.utils.table_to_book(document.querySelector('#table')); // 没有固定列的时候，直接导出}let exportTableOut = XLSX.write(exportTable, { bookType: 'xlsx', bookSST: true, type: 'array' }) // 导出的数据类型try {FileSaver.saveAs(new Blob([exportTableOut], {type: 'application/octet-stream'}),`表格-${formattedTime}.xlsx`) // 导出的文件名，可自定义，使用模板字符串语法``包裹,可以区分每次下载的文件} catch (e) {if (typeof console !== 'undefined') {console.log(e, exportTableOut)}}return exportTableOut},fetchData() {this.listLoading = truegetList().then(response => {this.list = response.data.itemsthis.listLoading = false})}}
}
</script>

5.下载成功后的表格展示

6.需要注意的坑，如果在表格中的el-table-column中使用了fixed=‘right’，则需要将let fix = document.querySelector(‘.el-table__fixed’) 改为let fix = document.querySelector(“.el-table__fixed-right”))

7.代码参考：纯前端导出excel