image.png

點擊“點擊導(dǎo)出”按鈕后下載sheetjs.xlsx文件（導(dǎo)出文件）

image.png

Element組件庫中的el-table表格導(dǎo)出需要的主要是兩個依賴:(xlsx 和 file-saver)
安裝.

npm install --save xlsx file-saver

兩個插件的詳細地址在下面

[https://github.com/SheetJS/js-xlsx](https://github.com/SheetJS/js-xlsx)
[https://github.com/eligrey/FileSaver.js](https://github.com/eligrey/FileSaver.js)

代碼部分(有注釋解釋說明)

<template>
    <div class="table">
        <!--給表格添加一個id，導(dǎo)出文件事件需要使用-->
        <el-table
        :data="tableData"
        border
        style="width: 100%"
        id="out-table"
        >
        <el-table-column
            prop="date"
            label="日期"
            width="180"
        >
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180"
        >
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
        >
        </el-table-column>
        </el-table>
        <!--給按鈕綁定事件-->
        <button @click="exportExcel">點擊導(dǎo)出</button>
    </div>
    </template>

    <script>
    // 引入導(dǎo)出Excel表格依賴
    import FileSaver from "file-saver";
    import XLSX from "xlsx";

    export default {
    name: "javascriptthree",
    data() {
        return {
        tableData: [
            {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀區(qū)金沙江路 1518 弄"
            },
            {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀區(qū)金沙江路 1517 弄"
            },
            {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀區(qū)金沙江路 1519 弄"
            },
            {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀區(qū)金沙江路 1516 弄"
            }
        ]
        };
    },
    mounted() {},
    methods: {
        //定義導(dǎo)出Excel表格事件
        exportExcel() {
        /* 從表生成工作簿對象 */
        var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
        /* 獲取二進制字符串作為輸出 */
        var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        try {
            FileSaver.saveAs(
            //Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。
            //Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。
            //File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統(tǒng)上的文件。
            //返回一個新創(chuàng)建的 Blob 對象，其內(nèi)容由參數(shù)中給定的數(shù)組串聯(lián)組成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //設(shè)置導(dǎo)出文件名稱
            "sheetjs.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
        }
    }
    };
    </script>

    <style scoped>
    .table {
    width: 100%;
    height: 300px;
    }
    </style>