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

資訊專欄INFORMATION COLUMN

Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格

DirtyMind / 3517人閱讀

摘要：網(wǎng)上看了很多文檔感覺都不全，這里寫一篇完整的詳細(xì)教程。一安裝依賴前面基本一樣二下載兩個(gè)所需要的文件和。是每一欄的名稱，需手動(dòng)輸入。是中的值，也是要自己寫的。這里記得要與里面的名稱對(duì)應(yīng)這里可定義導(dǎo)出的文件名參考文章

網(wǎng)上看了很多文檔感覺都不全，這里寫一篇完整的詳細(xì)教程。

一、安裝依賴（前面基本一樣）

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

二、下載兩個(gè)所需要的js文件Blob.js和 Export2Excel.js。

這里貼下下載地址：

http://xiazai.jb51.net/201708/yuanma/Export2Exce_jb51.rar

三、src目錄下新建vendor文件夾，將Blob.js和 Export2Excel.js放進(jìn)去。

四、更改webpack.base.conf.js配置

在resolve的alias： 
"vendor": path.resolve(__dirname, "../src/vendor")

五、在.vue文件中
script部分

data(){
  return{
    list:[
        {
          name:"韓版設(shè)計(jì)時(shí)尚風(fēng)衣大",
          number:"MPM00112",
          salePrice:"￥999.00",
          stocknums:3423,
          salesnums:3423,
          sharenums:3423,
      },
      {
          name:"韓版設(shè)計(jì)時(shí)尚風(fēng)衣大",
          number:"MPM00112",
          salePrice:"￥999.00",
          stocknums:3423,
          salesnums:3423,
          sharenums:3423,
      },
    ]
  }

methods:{
    formatJson(filterVal, jsonData) {
    　　　　return jsonData.map(v => filterVal.map(j => v[j]))
    　　},
    export2Excel() {
    　　　　require.ensure([], () => {
    　　　　　　const { export_json_to_excel } = require("../../../vendor/Export2Excel");
    　　　　　　const tHeader = ["商品名稱","商品貨號(hào)","售價(jià)","庫(kù)存","銷量","分享",];
    　　　　　　const filterVal = ["name", "number", "salePrice", "stocknums", "salesnums", "sharenums", ];
    　　　　　　const list = this.goodsItems;
    　　　　　　const data = this.formatJson(filterVal, list);
    　　　　　　export_json_to_excel(tHeader, data, "商品管理列表");
    　　　　})
    　 }
}

template:

這里說(shuō)明一下：

1、export2Excel()中require的路徑因個(gè)人項(xiàng)目結(jié)構(gòu)不同可能需要多帶帶調(diào)整，如果報(bào)module not found "../../Export2Excel.js"之類請(qǐng)自行修改路徑。

2、tHeader是每一欄的名稱，需手動(dòng)輸入。

3、filterVal是data中l(wèi)ist的key值，也是要自己寫的。

4、這里記得要與data里面的list名稱對(duì)應(yīng)

5、這里可定義導(dǎo)出的excel文件名

參考文章：https://www.cnblogs.com/Mrfan...

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

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

相關(guān)文章

  • 使用 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)出通過純，您完全可以實(shí)現(xiàn)導(dǎo)入和導(dǎo)出文件功能，并為最終用戶提供與這些文件進(jìn)行交互的界面。 JavaScript是一個(gè)涵蓋多種框架、直譯式、可以輕松自定義客戶端的腳本語(yǔ)言，在 Web 應(yīng)用程序中，更加易于編碼和維護(hù)。而Excel 作為一款深受用戶喜愛的電...

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

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

    摘要：有一個(gè)項(xiàng)目需求，要求在前端項(xiàng)目中導(dǎo)出表格，經(jīng)過查找代碼確實(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)過查找代碼,Vue.js確實(shí)可以實(shí)現(xiàn)，具體實(shí)現(xiàn)步驟為： 1.安裝依賴 npm install -S ...

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

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

    摘要：為了便于您更清晰的理解的體系架構(gòu)，在這里我將為您展示年開發(fā)者知識(shí)圖譜，它包含了所有開發(fā)過程中的關(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ān)于它的專業(yè)術(shù)語(yǔ)了，例如：?jiǎn)雾?yè)面應(yīng)用程序、異步組件、服務(wù)器端呈現(xiàn)等，您可能還聽過和Vue經(jīng)常一起被提到的工具和庫(kù)，如Vuex、Webp...

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

  • XCel 項(xiàng)目總結(jié) - Electron 與 Vue 的性能優(yōu)化

    摘要：而這里的單元格信息是唯一的，所以直接通過為一個(gè)空對(duì)象賦值即可。和相關(guān)的知識(shí)和技巧高亮的列單元格采用展示。在中，被選中的單元格會(huì)高亮相應(yīng)的行和列，以提醒用戶。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一個(gè) Excel 數(shù)據(jù)清洗工具，其通過可視化的方式讓用戶輕松地對(duì) Excel 數(shù)據(jù)進(jìn)行篩選。 XCEL...

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

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

0條評(píng)論

DirtyMind

男|高級(jí)講師

TA的文章

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