vue中導(dǎo)出excel文件的示例

這篇文章給大家分享的是有關(guān)vue中導(dǎo)出excel文件的示例的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

1.安裝依賴

//npm 
npm install -S file-saver xlsx
npm install -D script-loader

2.在main.js中進(jìn)行導(dǎo)入Bolb.js與Export2Excel.js

兩個js文件地址：

鏈接：https://pan.baidu.com/s/1ib2Ox18FngVlhKxs6l8OZQ
提取碼：sirm

import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'

3.在組件中使用

//導(dǎo)出的方法
exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../excel/Export2Excel');
        const tHeader = ['序號', '昵稱', '姓名'];
        // 上面設(shè)置Excel的表格第一行的標(biāo)題
        const filterVal = ['index', 'nickName', 'name'];
        // 上面的index、nickName、name是tableData里對象的屬性
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');
      })
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))

tHeader是表頭，filterVal 中的數(shù)據(jù)是表格的字段，tableData中存放表格里的數(shù)據(jù)，類型為數(shù)組，里面存放對象，表格的每一行為一個對象。

感謝各位的閱讀！關(guān)于vue中導(dǎo)出excel文件的示例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！