Vue導出json數據到Excel電子表格

DirtyMind 發布于2019-08-21 17:44 / 3515人閱讀

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

網上看了很多文檔感覺都不全，這里寫一篇完整的詳細教程。

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

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放進去。

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

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

五、在.vue文件中
script部分

data(){
  return{
    list:[
        {
          name:"韓版設計時尚風衣大",
          number:"MPM00112",
          salePrice:"￥999.00",
          stocknums:3423,
          salesnums:3423,
          sharenums:3423,
      },
      {
          name:"韓版設計時尚風衣大",
          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的路徑因個人項目結構不同可能需要多帶帶調整，如果報module not found "../../Export2Excel.js"之類請自行修改路徑。

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

3、filterVal是data中list的key值，也是要自己寫的。

4、這里記得要與data里面的list名稱對應

5、這里可定義導出的excel文件名

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

云服務器 GPU云服務器 js數據導出到excel js導出數據到excel js 導出數據到excel excel表格導出

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89932.html

使用 SpreadJS 實現 JavaScript 中導入和導出Excel文件

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

Jioby 2019-08-23 18:31 評論0 收藏0
vue.js中如何導出Excel表格

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

lunaticf 2019-08-23 18:03 評論0 收藏0
Vue 2019開發者圖譜

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

cgspine 2019-08-23 18:14 評論0 收藏0
XCel 項目總結 - Electron 與 Vue 的性能優化

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

XUI 2019-08-22 10:45 評論0 收藏0