First, you need to be in a VUE project that can start successfully without any errors

Table export

  1. Install XLSX library
npm install xlsx --save
Copy the code
  1. file-saver
npm install file-saver --save
Copy the code
  1. 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
  1. 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 code

Note: please understand the improper place, welcome to exchange