今天再開(kāi)發(fā)中遇到一件事情，就是怎樣用已有數(shù)據(jù)導(dǎo)出excel文件，網(wǎng)上有許多方法，有說(shuō)用數(shù)據(jù)流的方式，https://www.cnblogs.com/yeqrblog/p/9758981.html，但是現(xiàn)在我的想法是只是用數(shù)組數(shù)據(jù)，不接著與數(shù)據(jù)流的方式去實(shí)現(xiàn)，事實(shí)證明是可以的：

1.安裝依賴(lài)

//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 = ['序號(hào)', '昵稱(chēng)', '姓名'];
        // 上面設(shè)置Excel的表格第一行的標(biāo)題
        const filterVal = ['index', 'nickName', 'name'];
        // 上面的index、nickName、name是tableData里對(duì)象的屬性
        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ù)，類(lèi)型為數(shù)組，里面存放對(duì)象，表格的每一行為一個(gè)對(duì)象。

如此，就可以了。

相關(guān)推薦：

2020年前端vue面試題大匯總（附答案）

vue教程推薦：2020最新的5個(gè)vue.js視頻教程精選

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程教學(xué)！！

總結(jié)

以上是生活随笔為你收集整理的vue中怎么导出excel文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。