First, you need to be in a VUE project that can start successfully without any errors
Table export
- Install XLSX library
npm install xlsx --save
Copy the code- file-saver
npm install file-saver --save
Copy the code- Write a function – create exportSexcel.js file
// Import the package
import FileSaver from "file-saver";
import XLSX from "xlsx";
export function getExcel(dom, title) {
var excelTitle = title;
var wb = XLSX.utils.table_to_book(document.querySelector(dom))
// Get the 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)
}
}
return wbout
}
Copy the code- Create an exports.vue file using the function
<! Components are components in Element UI -->
<template>
<div>
<el-button type="info" style="margin:20px;" @click="exportExcelSelect">Export Excel</el-button>
<el-table
:data="tableData"
@selection-change="handleSelectionChange">
<el-table-column
type="selection">
</el-table-column>
<! -- When the data is backend request, form paging, component implementation paging memory selected, <el-table :data="tableData" :row-key="getRowKeys" @selection-change="handleSelectionChange"> <el-table-column :reserve-selection="true" 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>
<el-dialog title="Table Save preview" width="70%" :visible.sync="tableSavePreview">
<el-table :data="multipleSelection" 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 getExcel from 'Path to the exportSexcel.js file'
export default {
name: "ExcelPage".data(){
return{
tableData: [{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}].multipleSelection: [].tableSavePreview:false,}},methods: {// When the data is a back-end request and paging is formed, the component implements paging memory
getRowKeys(row) {
return row.id;
},
exportExcel() {
getExcel('#selectTable'.'Exported custom title')},exportExcelSelect(){
if (this.multipleSelection.length < 1) {this.$message.error('Please select what to export! ');
return false;
}
this.tableSavePreview = true;
},
handleSelectionChange(val) {
this.multipleSelection = val; }}}</script>
Copy the codeNote: please understand the improper place, welcome to exchange