When developing the company's back-end management system recently, *Operations raised a demand to implement a one-click export function for a certain table data. I am an intern, what do I know, search it, fortunately I found it, pinch haha, the next step is to realize it The process is easy to understand, I saw a simple page for your reference
1. Installation dependencies
npm install xlsx@^0.16.0 //一定要加上版本号，不然版本太高会报错
npm install file-saver
2. Global configuration in the main.js file
// vue中导出excel表格模板
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
// 将excel表格模板设置全局
Vue.prototype.$FileSaver = FileSaver;
Vue.prototype.$XLSX = XLSX; 3. Code part
1. template part
<template>
<div class="content">
<el-row>
<el-col :span="24">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="font-weight:700;font-size:24px">{
{title}}</span>
<el-button style="float: right;" icon="el-icon-download" type="success" @click="Export">导出</el-button>
</div>
<el-table
id="table_excel" //此处给table加id另作它用
border
:data="tableData"
style="width: 100%"
height="580">
<el-table-column
align="center"
prop="date"
label="日期"
width="200">
</el-table-column>
<el-table-column
align="center"
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
align="center"
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
align="center"
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
align="center"
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
align="center"
prop="zip"
label="邮编">
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</div>
</template>2. script part
export default {
data(){
return {
title:"导出演示",
tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
}
},
methods:{
Export(){
this.$confirm("确定要导出文件到Excel?","导出提示",{
//这里是加一个导出提示，根据个人喜好，可加可不加
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "info",
}).then(()=>{
setTimeout(()=>{
var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
let tables = document.getElementById('table_excel'); //这里是绑定元素，输入你要导出的table表格的id
let table_book = this.$XLSX.utils.table_to_book(tables,xlsxParam);
const table_write = this.$XLSX.write(table_book, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
this.$FileSaver.saveAs(
new Blob([table_write], { type: "application/octet-stream" }),`${this.title}.xlsx` //这里是文件名
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, table_write);
}
return table_write;
},1000)
})
}
}
}
</script>4. Operation effect display
1. Current page
2. Click the Export button
3. The download is complete
4. Display of downloaded file content
5. Explanation of Mouth Crazy
a. Before exporting, I added a timer with a delay of 1 second. The reason is that it takes time to render the data from the backend to the table. You must wait until the rendering is complete before exporting the file to have data, otherwise you will It is found that there is only one row of table header.
b. If you find that the exported data is duplicated twice, then delete the fixed attribute of <el-table-column fiexd ></el-table-column> to solve the problem
c. My demonstration example is not a paging query, so all the data can be exported at one time. If it is a paging query, currently only the data of the current page can be exported.
(1) If the backend gives you all the data, you can add an <el-table></el-table> to the template part for the pagination processing done by your frontend, the el-table tag of this el-table The table-column should be exactly the same as the one rendered above, but the style attribute should be set to hidden: display:none, this table does not do paging processing (that is, all data is rendered into this table once behind the scenes, without paging, and the id is bound to this table), in this case, click Export to export all the data in a logical manner. Do you understand? If you don’t understand, let me demonstrate it. After all, I am dumb, and the demonstration code is as follows:
<el-table
border
:data="tableData"
style="width: 100%"
height="580">
<el-table-column
align="center"
prop="date"
label="日期"
width="200">
</el-table-column>
<el-table-column
align="center"
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
align="center"
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
align="center"
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
align="center"
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
align="center"
prop="zip"
label="邮编">
</el-table-column>
</el-table>
<el-table
id="table_excel"
border
:data="tableData"
style="width: 100%"
height="580">
<el-table-column
align="center"
prop="date"
label="日期"
width="200">
</el-table-column>
<el-table-column
align="center"
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
align="center"
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
align="center"
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
align="center"
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
align="center"
prop="zip"
label="邮编">
</el-table-column>
</el-table>See it, the two el-table tags bind the id to the hidden table, because all the data is exported by that id! (On the long-winded side: two table tags, one is used to render data in paging for people to see, and the other table is to export all data without paging!!!!!! )
(2) If the backend has done paging processing, the only solution should probably be to write an interface that sends all data without paging. Anyway, this is how I currently handle it. There is no way. Write it yourself, just implement the function first, ignore the performance for now, hehehe, if you have a good way, be sure to tell me!
After reading it, if it is helpful to you, please give it a thumbs up. We don’t do it for anything else, just to record the intractable diseases encountered in the work, work hard together, come on, Oli give~