js-xlsx + handsontable + echarts實現excel上傳編輯然后顯示成圖表

joy968 發布于2019-08-23 12:03 / 2484人閱讀

摘要：生成報表數據都處理完了之后，就是生成報表了，報表這里稍微做的靈活了一點，是要讓用戶根據上傳的數據，自己選擇字段，然后用去生成對應的報表。

js-xlsx + handsontable + echarts 實現在前端導入excel數據并生成echart報表

前言

最近都在做類似 ERP 的項目,所以呢,又碰到一個比較{{BANNED}}的需求(至少對我來說是),在前端導入 excel 文件,
然后在瀏覽器里面預覽和編輯,　最后再選擇一些數據,用echarts生成報表.

依賴

js-xlsx 讀取excel數據到js

handsontable 類似Excel一樣顯示和編輯列表數據

echarts 一個生成各種報表的庫

數據導入

數據導入這邊需要用到瀏覽器的 FileReader對象 的 readAsBinaryString() 函數, 把選擇的文件讀取出來,
然后再監聽 FileReader 對象的 onload 事件 , 在 onload 事件的回調函數中,我們可以獲取到讀取的二進制數據.
這里順便提一下, FileReader 對象提供以下方法,用來讀取各種格式的數據(參考自MDN)

FileReader.readAsArrayBuffer() // 讀取文件的 ArrayBuffer 數據對象.

FileReader.readAsBinaryString() // 讀取文件的原始二進制數據

FileReader.readAsDataURL() // 返回一個URL格式的字符串以表示所讀取文件的內容

FileReader.readAsText() // 返回一個字符串以表示所讀取的文件內容

tips: 需要注意的是 readXxxxx() 函數,是不直接返回讀取結果的,因為讀取這個動作異步的.

readAsBinaryString 讀取到的內容應該是一個二進制的字符串,這個時候,需要調用 js-xlsx
的 read 方法, read 返回的是一個可讀性很強的對象了,我看了一下,里面有關于表格的屬性很多都有
,如樣式, vsb宏, sheets等等 (反正我對excel也不熟,認識的也就這些哈),

npm i xlsx

import XLSX from "xlsx"
...
let res = XLSX.read(data, {type: "binary"})
let sheetName = res.Sheets[res.SheetNames[0]]
let table = XLSX.utils.sheet_to_json(sheetName, {header: "A", raw: true, defval: " "})

這里的 res 得到的我猜是 excel 表格原有的數據,里面包含上面說的很多種數據,而正常情況下,
我們需要的往往只是第一個 sheet 里面的 純數據, 所以調用 XLSX.utils.sheet_to_json
獲取第一個 sheet 的數據, table 拿到的應該是一個我們熟悉的數組了.這個時候如果你只是單純的渲染的話,
你甚至可以就此打住,自己寫一個渲染方法(比如字符串拼接哈)把數據渲染出來即可.

如果單純的顯示無法滿足你的需求,那么你可能需要 handsontable 了.

tips: sheet_to_json 的 第二個參數里面的 header，可以傳數字，也可以轉 "A", 兩個的主要區別在于轉化出來的表第一行如果是空行會不會正常顯示，
傳 "A" 會正常顯示，傳數字的話，如果表格的第一行有空白單元格，表格會錯亂。

數據展示

首先當然是安裝,我的項目是基于 vue 的,所以要安裝 vue 版本的,其他框架的,只要安裝響應的版本即可.

npm i @handsontable/vue

然后就可以直接這么用

模板里面的 settings 是 handsontable 的一些配置, 每個項目的需求不同,配置也不同,這里就不列舉出來了, 上面獲取到的 table 在這里要賦值給 settings.data

我這里用 handsontable 顯示數據的目的，是讓用戶可以清晰的看到上傳的表的數據和結構，可以刪除屌部分無用的數據，減少冗余。

生成報表

數據都處理完了之后，就是生成報表了，報表這里稍微做的靈活了一點，是要讓用戶根據上傳的數據，自己選擇字段，然后用 echart 去生成對應的報表。

為了偷懶降低復雜度，我這里只提供了3種報表類型供選擇,分別是餅圖，柱狀圖，折線圖，稍微分析 echart 的配置手冊，我發現各種類型的圖表，
其實主要的區別在 series 配置項下面，其他位置幾乎沒啥區別 ~~就算有區別，也被我無視~~ 。最終的實現大概是這樣

let option = {
  title: {...},
  tooltip: {...},
  xAxis: {...},
  yAxis: {...},
  toolbox: {...},
}

switch (type) {
  case "pie" : 
    option.series = {...}
    break
  case "pie" : 
    option.series = {...}
    break
  case "pie" : 
    option.series = {...}
    break
}

myChart.setOption(option)

echart 第一次渲染完以后，如果改變 option 的數據然后重新渲染，新的 option 數據是采用追加的方式加進去的，類似 javascript 的 Object.assign(),
所以如果新的數據沒辦法完全覆蓋掉就舊的數據的話，舊的那些沒有被覆蓋掉的數據，還會渲染出來. 我對這種情況的處理方法是調用 dispose.dispose() 把實例銷毀掉，
然后重新創建一個新實例，設置新的 option

最后

源碼記得star 和follow哦。

云服務器 GPU云服務器 echarts 圖表 excel表格圖表制作 excel表格制作圖表 excel表格怎么制作圖表

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

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

手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

zgbgx 2019-08-29 12:46 評論0 收藏0
Handsontable 類似 excel 表格編輯器

摘要：原文發布于個人博客歡迎訪問簡介是一個類似表格編輯器，支持豐富的展現和交互，以及多樣的單元格展現和配置核心由原生編寫，通過打包同類項目中，點贊最多，列表官網地址支持的特征的一些主要功能這里只列出主要功能，想了解更多更能，可以查詢官方文檔。這原文發布于個人博客>>歡迎訪問 HandsonTable 簡介 Handsontable 是一個類似 excel 表格編輯器，支持豐富的展現和交互...

ztyzz 2019-08-20 18:13 評論0 收藏0
Handsontable 類似 excel 表格編輯器

摘要：原文發布于個人博客歡迎訪問簡介是一個類似表格編輯器，支持豐富的展現和交互，以及多樣的單元格展現和配置核心由原生編寫，通過打包同類項目中，點贊最多，列表官網地址支持的特征的一些主要功能這里只列出主要功能，想了解更多更能，可以查詢官方文檔。這原文發布于個人博客>>歡迎訪問 HandsonTable 簡介 Handsontable 是一個類似 excel 表格編輯器，支持豐富的展現和交互...

villainhr 2019-08-01 17:12 評論0 收藏0
12個值得關注的頂級可視化JS庫涉及圖表、動畫、時間處理，表格操作

摘要：本文是譯文，原文是我在原文的基礎上加了百度的圖表庫，這個也是毫不遜色其他圖表庫的。更新記錄圖表類數據驅動文檔通常被稱為最強大的開源可視化庫。是迄今為止最好的圖表庫。在頂級功能支持，使任何元素可拖動，可旋轉或可滑動滾動和快速性能的能力。本文是譯文，原文是https://da-14.com/blog/top-11...我在原文的基礎上加了百度的Echats圖表庫，這個也是毫不遜色其他圖表...

JinB 2019-08-20 14:14 評論0 收藏0