快捷導(dǎo)航

vue.js中導(dǎo)出Excel表格的案例分析

更新時(shí)間：2019年06月11日 10:43:27 作者：冬瓜先生

這篇文章主要介紹了vue.js中如何導(dǎo)出Excel表格,在項(xiàng)目中經(jīng)常會(huì)遇到這樣的需求，今天小編分步驟通過(guò)實(shí)例代碼給大家詳細(xì)介紹，需要的朋友可以參考下

有一個(gè)項(xiàng)目需求，要求在前端項(xiàng)目中導(dǎo)出Excel表格，經(jīng)過(guò)查找代碼,Vue.js確實(shí)可以實(shí)現(xiàn)，具體實(shí)現(xiàn)步驟為：

1.安裝依賴(lài)

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

2.導(dǎo)入兩個(gè)JS

下載Blob.js和Export2Excel.js，在src目錄下新建Excel文件夾，里面放入Blob.js和Export2Excel.js兩個(gè)JS文件

3.在main.js引入這兩個(gè)JS文件 **

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

4.在組件中使用

//導(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ì)象。

tableData 中的值為：

data () {
return {
 tableData: [
  {'index':'0',"nickName": "沙灘擱淺我們的舊時(shí)光", "name": "小明"},
  {'index':'1',"nickName": "女人天生高貴", "name": "小紅"},
  {'index':'2',"nickName": "海是彩色的灰塵", "name": "小蘭"}
 ]
}
}

最后實(shí)現(xiàn)的效果圖：

如果運(yùn)行時(shí)，報(bào)如下所示的錯(cuò)誤：

這是因?yàn)镋xport2Excel.js的設(shè)置需要改下：

注：把require('script-loader!vendor/Blob')改為 require('./Blob.js')

項(xiàng)目中實(shí)際應(yīng)用案例

/ 導(dǎo)出 */

formatJson(filterVal, jsonData) {
   // console.log(filterVal,jsonData)
    return jsonData.map(v => filterVal.map(j => {
       if(j == 'xxdz'){      //..詳細(xì)地址
        return v.name1 + v.name2 + v.name3 + v.gridName + v.xxdz
      }
      if(j == 'qyzw'){      //..區(qū)域裝維
        return v.name2 + '/' + v.yxCname
      }
      if(j == 'state'){      //..工單狀態(tài)
        return this.config.gzdStateList[v.state]
      }
      return v[j]
    }))
  },
  ygExcel() {
    let params = {}
    let queryForm = this.deepClone(this.queryForm)
    params.currentPage =1
    params.pageSize = this.count
    params.queryForm = queryForm
    params.prop = this.prop
    params.order = this.order
    // params.ifExport = true
    this.startLoading()
    this.$post( "/api/UserController/getList",params, (data) => {
     console.log(data)
      let tableData =data.list;
      // let tableData = data.list;
      require.ensure([], () => {
        const { export_json_to_excel } = require('../vendor/Export2Excel');
        const tHeader = this.config.ygbHeader;//在config中定義表頭
        const filterVal = this.config.ygFilterVal;//在config中定義表頭對(duì)應(yīng)的字段
        const data = this.formatJson(filterVal, tableData);
        export_json_to_excel(tHeader, data, '員工詳情表');下載是顯示的表名
      })
    })
　 },

總結(jié)

以上所述是小編給大家介紹的vue.js中導(dǎo)出Excel表格的案例分析,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: