<del id="mme2y"></del>

vue讀取本地的excel文件并顯示在網頁上

Tikitoo 發布于2019-08-26 13:58 / 2355人閱讀

摘要：我想實現讀取一個本地的文件然后顯示在網頁上一開始選擇的方法是建個通過發送請求來實現但是覺得只是讀取一個本地文件還要搞個太復雜了最終還是通過模塊實現了讀取本地文件無需后端步驟如下通過新建項目編寫分析的腳本將行列轉換讀出來的數據很難讀轉換為格

我想實現讀取一個本地的xlsx文件(task_list.xlsx)然后顯示在網頁上, 一開始選擇的方法是建個express server, 通過發送axios請求來實現, 但是覺得只是讀取一個本地文件還要搞個server太復雜了, 最終還是通過"xlsx"模塊 + axios實現了讀取本地文件, 無需后端, 步驟如下:

1.通過vue-cli新建項目:

2.編寫分析excel workbook的腳本
/src/scripts/read_xlsx.js

const XLSX = require("xlsx")

//將行,列轉換
function transformSheets(sheets) {
  var content  = []
  var content1 = []
  var tmplist = []
  for (let key in sheets){
    //讀出來的workbook數據很難讀,轉換為json格式,參考https://github.com/SheetJS/js-xlsx#utility-functions
    tmplist.push(XLSX.utils.sheet_to_json(sheets[key]).length)
    content1.push(XLSX.utils.sheet_to_json(sheets[key]))
  }
  var maxLength = Math.max.apply(Math, tmplist)
  //進行行列轉換
  for (let y in [...Array(maxLength)]){
    content.push([])
    for (let x in [...Array(tmplist.length)]) {
      try {
        for (let z in content1[x][y]){
          content[y].push(content1[x][y][z])
        }
      } catch (error) {
        content[y].push(" ")
      }
    }
  }
  content.unshift([])
  for (let key in sheets){
    content[0].push(key)
  }
  return content

}

export {transformSheets as default}

3.新建一個組件
/src/components/task_list.vue

{{h}}
{{item}}

效果就是這樣,編程新手,就這個東西斷斷續續搞了快一周了...

github地址 https://github.com/LeviDeng/t...
希望能有幫助,喜歡的給個star吧

GPU云服務器云服務器讀取服務器文件并下載 php讀取excel文件怎么遠程讀取云服務器上的文件讀取excel數據的js

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

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

網頁版模仿Excel

摘要：鼠標按下拖拽多選單元格這個是本唯一的亮點了個人認為。這樣做的結果是頁面非常卡，因為鼠標移動過程會多次觸發鼠標移動事件，會多次進行單元格元素循環遍歷。網頁版模仿Excel 最近公司閑的dan疼，非要模仿Excel做一個網頁版的Excel，剛開始聽說要做這么一個東西的時候瞬間覺得公司領導高(sang)瞻(xin)遠(bing)矚(kuang)，只能頭鐵的接下了，那就開始干。其實主要目的是...

james 2019-08-26 11:49 評論0 收藏0
網頁版模仿Excel

摘要：鼠標按下拖拽多選單元格這個是本唯一的亮點了個人認為。這樣做的結果是頁面非常卡，因為鼠標移動過程會多次觸發鼠標移動事件，會多次進行單元格元素循環遍歷。網頁版模仿Excel 最近公司閑的dan疼，非要模仿Excel做一個網頁版的Excel，剛開始聽說要做這么一個東西的時候瞬間覺得公司領導高(sang)瞻(xin)遠(bing)矚(kuang)，只能頭鐵的接下了，那就開始干。其實主要目的是...

Carl 2019-08-01 18:42 評論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
【easy-invoices】electron-vue、sqlite3 項目初探

摘要：遠程讀取會有許多限制，防止引起不必要的安全隱患。比較時可以把點去掉轉為數字類型比較腳本執行完畢下載前可以拿到更新日志時間版本號和包大小，下載時可以拿到速度。然后開啟該項目的構建。將第一步生成的填至項目環境變量，參數名為。父母都是做出納相關的工作，希望我能給他們做個簡單的進銷存，在上班的時候使用。開發一個不需要花錢買服務器，不需要依賴網絡（更新除外），單機版的程序，對于前端出身的我來說...

wpw 2019-08-23 12:36 評論0 收藏0