vue.js中如何導出Excel表格

lunaticf 發布于2019-08-23 18:03 / 1965人閱讀

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

有一個項目需求，要求在前端項目中導出Excel表格，經過查找代碼,Vue.js確實可以實現，具體實現步驟為：

1.安裝依賴

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

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

3.在main.js引入這兩個JS文件 **

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

4.在組件中使用

//導出的方法
exportExcel() {
  require.ensure([], () => {
    const { export_json_to_excel } = require("../excel/Export2Excel");
    const tHeader = ["序號", "昵稱", "姓名"];
    // 上面設置Excel的表格第一行的標題
    const filterVal = ["index", "nickName", "name"];
    // 上面的index、nickName、name是tableData里對象的屬性
    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 中的數據是表格的字段，tableData中存放表格里的數據，類型為數組，里面存放對象，表格的每一行為一個對象。
tableData 中的值為：

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

}

最后實現的效果圖：

如果運行時，報如下所示的錯誤：

這是因為Export2Excel.js的設置需要改下：

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

項目中實際應用案例
/導出 */

    formatJson(filterVal, jsonData) {
      // console.log(filterVal,jsonData)
        return jsonData.map(v => filterVal.map(j => {
             if(j == "xxdz"){            //..詳細地址
                return v.name1 + v.name2 + v.name3 + v.gridName + v.xxdz
            }
            if(j == "qyzw"){            //..區域裝維
                return v.name2 + "/" + v.yxCname
            }
            if(j == "state"){            //..工單狀態
                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中定義表頭對應的字段
                const data = this.formatJson(filterVal, tableData);
                export_json_to_excel(tHeader, data, "員工詳情表");下載是顯示的表名
            })
        })
　  },

GPU云服務器云服務器 excel表格導出表格導出為Excel excel導出出錯 excel導出亂碼

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

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

Vue 2019開發者圖譜

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

cgspine 2019-08-23 18:14 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

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

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

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

khs1994 2019-08-23 18:08 評論0 收藏0
使用 SpreadJS 實現 JavaScript 中導入和導出Excel文件

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

Jioby 2019-08-23 18:31 評論0 收藏0