成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue.js中如何導(dǎo)出Excel表格

lunaticf / 1975人閱讀

摘要：有一個(gè)項(xiàng)目需求，要求在前端項(xiàng)目中導(dǎo)出表格，經(jīng)過(guò)查找代碼確實(shí)可以實(shí)現(xiàn)，具體實(shí)現(xiàn)步驟為安裝依賴導(dǎo)入兩個(gè)下載和，在目錄下新建文件夾，里面放入和兩個(gè)文件在引入這兩個(gè)文件在組件中使用導(dǎo)出的方法序號(hào)昵稱姓名上面設(shè)置的表格第一行的標(biāo)題上面的是里對(duì)

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

1.安裝依賴

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)", "昵稱", "姓名"];
    // 上面設(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ù)，類型為數(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, "員工詳情表");下載是顯示的表名
            })
        })
　  },

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104600.html

相關(guān)文章

  • Vue 2019開發(fā)者圖譜

    摘要：為了便于您更清晰的理解的體系架構(gòu)，在這里我將為您展示年開發(fā)者知識(shí)圖譜，它包含了所有開發(fā)過(guò)程中的關(guān)鍵部分。在數(shù)據(jù)展示前端導(dǎo)入導(dǎo)出圖表面板數(shù)據(jù)綁定等場(chǎng)景無(wú)需大量代碼開發(fā)和測(cè)試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風(fēng)險(xiǎn)。 作為 Vue 的初學(xué)者，您或許已經(jīng)聽過(guò)很多關(guān)于它的專業(yè)術(shù)語(yǔ)了，例如：?jiǎn)雾?yè)面應(yīng)用程序、異步組件、服務(wù)器端呈現(xiàn)等，您可能還聽過(guò)和Vue經(jīng)常一起被提到的工具和庫(kù)，如Vuex、Webp...

    cgspine 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評(píng)論0 收藏0

  • 使用 SpreadJS 實(shí)現(xiàn) JavaScript 中導(dǎo)入和導(dǎo)出Excel文件

    摘要：而作為一款深受用戶喜愛的電子表格工具，借助其直觀的界面出色的計(jì)算性能和圖表工具，已經(jīng)成為數(shù)據(jù)統(tǒng)計(jì)領(lǐng)域不可或缺的軟件之一。使用實(shí)現(xiàn)的導(dǎo)入和導(dǎo)出通過(guò)純，您完全可以實(shí)現(xiàn)導(dǎo)入和導(dǎo)出文件功能，并為最終用戶提供與這些文件進(jìn)行交互的界面。 JavaScript是一個(gè)涵蓋多種框架、直譯式、可以輕松自定義客戶端的腳本語(yǔ)言，在 Web 應(yīng)用程序中，更加易于編碼和維護(hù)。而Excel 作為一款深受用戶喜愛的電...

    Jioby 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<