国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

DirtyMind / 3519人閱讀

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

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

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

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

二、下載兩個所需要的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è)計時尚風(fēng)衣大",
          number:"MPM00112",
          salePrice:"￥999.00",
          stocknums:3423,
          salesnums:3423,
          sharenums:3423,
      },
      {
          name:"韓版設(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 = ["商品名稱","商品貨號","售價","庫存","銷量","分享",];
    　　　　　　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:

這里說明一下：

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

2、tHeader是每一欄的名稱，需手動輸入。

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89932.html

相關(guān)文章

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

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

    Jioby 評論0 收藏0

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

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

    lunaticf 評論0 收藏0

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

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

    cgspine 評論0 收藏0

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

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

    XUI 評論0 收藏0

發(fā)表評論

0條評論

DirtyMind

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<