Note: This method is capable of exporting multi-level tables, with ElementUI installed by default.
- Install XLSX library
npm install xlsx
Copy the code- The installation file – saver library
npm install file-saver
Copy the code- Write save function, file location:
src/utils/htmlToExcel.js
import FileSaver from "file-saver";
import XLSX from "xlsx";
const htmlToExcel = {
getExcel(dom,title='Default title'.){
var excelTitle = title;
var wb = XLSX.utils.table_to_book(document.querySelector(dom));
/* Gets a binary string as output */
var wbout = XLSX.write(wb, {bookType: "xlsx".bookSST: true.type: "array"});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
excelTitle + ".xlsx"
);
} catch (e) {
if (typeof console! = ="undefined") console.log(e, wbout);
}
returnwbout; }};export default htmlToExcel;
Copy the code- Use functions, file locations
src/views/TablePage.vue
Note: Table export implementation explanation, add selection function to display table, bind selected data to selectData through handleSelectionChange function, click export button after selecting the data to be exported, Displays the selectData in the el-Dialog table. This table is the last to be exported, so assign the id to selectTable and call exportExcel to confirm printing. Export Excel files through htmltoexcel.getexcel (‘#selectTable’,’ exported custom titles ‘).
<template>
<div>
<! Export button -->
<el-button type="primary" style="margin:20px;" @click="exportExcelSelect">Export Excel</el-button>
<! -- Original form -->
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
>
</el-table-column>
<el-table-column
prop="date"
label="Date"
>
</el-table-column>
<el-table-column
prop="name"
label="Name"
>
</el-table-column>
<el-table-column label="Full address">
<el-table-column
prop="province"
label="Province"
>
</el-table-column>
<el-table-column
prop="city"
label="Downtown"
>
</el-table-column>
<el-table-column
prop="address"
label="Address"
>
</el-table-column>
<el-table-column
prop="zip"
label="Zip code"
>
</el-table-column>
</el-table-column>
<el-table-column
fixed="right"
label="Operation"
>
<template>
<el-button type="text" size="small">To view</el-button>
<el-button type="text" size="small">The editor</el-button>
</template>
</el-table-column>
</el-table>
<! Preview popup table -->
<el-dialog title="Table Save preview" width="70%" :visible.sync="selectWindow">
<el-table :data="selectData" id="selectTable" height="380px">
<el-table-column
prop="date"
label="Date"
>
</el-table-column>
<el-table-column
prop="name"
label="Name"
>
</el-table-column>
<el-table-column label="Full address">
<el-table-column
prop="province"
label="Province"
>
</el-table-column>
<el-table-column
prop="city"
label="Downtown"
>
</el-table-column>
<el-table-column
prop="address"
label="Address"
>
</el-table-column>
<el-table-column
prop="zip"
label="Zip code"
>
</el-table-column>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="exportExcel">Sure to save</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import htmlToExcel from '@/utils/htmlToExcel'
export default {
name: "ExcelPage".data(){
return{
// Table data
tableData: [{date: '2016-05-03'.name: 'Wang Xiaotian'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.zip: 200333
}, {
date: '2016-05-02'.name: 'Xiao Ming Wang'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.zip: 200333
}, {
date: '2016-05-04'.name: 'Wang Xiaozhi'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.zip: 200333
}, {
date: '2016-05-01'.name: 'Wang Xiaohong'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.zip: 200333
}, {
date: '2016-05-08'.name: 'Wang Xiaohua'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.zip: 200333
}, {
date: '2016-05-06'.name: 'Wang Xiaoli'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.zip: 200333
}, {
date: '2016-05-07'.name: 'Wang Xiaohua'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.zip: 200333}].// Select the data in the table
selectData: [].selectWindow:false,}},methods: {/ / export
exportExcel() {
htmlToExcel.getExcel('#selectTable'.'Exported custom title')},// Displays a preview popup
exportExcelSelect(){
if (this.selectData.length < 1) {this.$message.error('Please select what to export! ');
return false;
}
this.selectWindow = true;
},
// Select data
handleSelectionChange(val) {
this.selectData = val; }}}</script>
<style scoped>
</style>
Copy the codeDemo video of this article: Click browse
More front-end content welcome to pay attention to the public number: day small day personal network