92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

我這里為了同學們好理解，把所有元素都寫到一個頁面。

1.第一步安裝插件

    


        


            


            

        

        


            

                npm install file-saver
            

        

    

    


        


            


            

        

        


            

                npm install xlsx
            

        

    

2.第二步在mian.js中設置全局

    


        


            


            

        

        


            

                // vue中導出excel表格模板
            

        

    

    


        


            


            

        

        


            

                import FileSaver from 'file-saver'
            

        

    

    


        


            


            

        

        


            

                import XLSX from 'xlsx'
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                Vue.prototype.$FileSaver = FileSaver; //設置全局
            

        

    

    


        


            


            

        

        


            

                Vue.prototype.$XLSX = XLSX; //設置全局
            

        

    

3.第三步使用 

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="daochu">
            

        

    

    


        


            


            

        

        


            

                <el-button @click="o" type="success" round>導出</el-button>
            

        

    

    


        


            


            

        

        


            

                <el-table
            

        

    

    


        


            


            

        

        


            

                id="ou"
            

        

    

    


        


            


            

        

        


            

                :data="tableData"
            

        

    

    


        


            


            

        

        


            

                style="width: 100%"
            

        

    

    


        


            


            

        

        


            

                :default-sort="{ prop: 'date', order: 'descending' }"
            

        

    

    


        


            


            

        

        


            

                >
            

        

    

    


        


            


            

        

        


            

                <el-table-column prop="date" label="日期" sortable width="180">
            

        

    

    


        


            


            

        

        


            

                </el-table-column>
            

        

    

    


        


            


            

        

        


            

                <el-table-column prop="name" label="姓名" sortable width="180">
            

        

    

    


        


            


            

        

        


            

                </el-table-column>
            

        

    

    


        


            


            

        

        


            

                <el-table-column prop="address" label="地址" :formatter="formatter">
            

        

    

    


        


            


            

        

        


            

                </el-table-column>
            

        

    

    


        


            


            

        

        


            

                </el-table>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                tableData: [
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                date: "2016-05-02",
            

        

    

    


        


            


            

        

        


            

                name: "王小虎",
            

        

    

    


        


            


            

        

        


            

                address: "上海市普陀區金沙江路 1518 弄",
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                date: "2016-05-04",
            

        

    

    


        


            


            

        

        


            

                name: "王小虎",
            

        

    

    


        


            


            

        

        


            

                address: "上海市普陀區金沙江路 1517 弄",
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                ],
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                methods:{
            

        

    

    


        


            


            

        

        


            

                o() {
            

        

    

    


        


            


            

        

        


            

                let tables = document.getElementById("ou");
            

        

    

    


        


            


            

        

        


            

                let table_book = this.$XLSX.utils.table_to_book(tables);
            

        

    

    


        


            


            

        

        


            

                var 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" }),
            

        

    

    


        


            


            

        

        


            

                "sheetjs.xlsx"
            

        

    

    


        


            


            

        

        


            

                );
            

        

    

    


        


            


            

        

        


            

                } catch (e) {
            

        

    

    


        


            


            

        

        


            

                if (typeof console !== "undefined") console.log(e, table_write);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return table_write;
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

可以看到已經導出 

實際工作中導出按鈕單獨抽離出去做到可以復用才是比較合理的