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

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供松山網(wǎng)站建設(shè)、松山做網(wǎng)站、松山網(wǎng)站設(shè)計(jì)、松山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、松山企業(yè)網(wǎng)站模板建站服務(wù)，十載松山做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

1.安裝依賴

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

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

兩個(gè)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ù)組，里面存放對象，表格的每一行為一個(gè)對象。

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

網(wǎng)站欄目：vue中導(dǎo)出excel文件的示例-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://weahome.cn/article/dedojs.html