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 fit
highlight-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">
{
{
scope.row.title }}
</template>
</el-table-column>
<el-table-column label="Author" width="110" align="center">
<template slot-scope="scope">
<span>{
{
scope.row.author }}</span>
</template>
</el-table-column>
<el-table-column label="Pageviews" width="110" align="center">
<template slot-scope="scope">
{
{
scope.row.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="scope.row.status | statusFilter">{
{
scope.row.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>{
{
scope.row.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: {
exportExcel() {
let now = new Date();
let year = now.getFullYear();
let month = ("0" + (now.getMonth() + 1)).slice(-2);
let day = ("0" + now.getDate()).slice(-2);
let hour = ("0" + now.getHours()).slice(-2);
let minute = ("0" + now.getMinutes()).slice(-2);
let second = ("0" + now.getSeconds()).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 = true
getList().then(response => {
this.list = response.data.items
this.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”))