前端讀取Excel報表文件

来源:http://www.cnblogs.com/imwtr/archive/2016/10/26/6001480.html
-Advertisement-
Play Games

在實際開發中,經常會遇到導入Excel文件的需求,有的產品人想法更多,想要在前端直接判斷文件內容格式是否正確,必填項是否已填寫 依據HTML5的FileReader,可以使用新的API打開本地文件(參考這篇文章) FileReader.readAsBinaryString(Blob|File) Fi ...


在實際開發中,經常會遇到導入Excel文件的需求,有的產品人想法更多,想要在前端直接判斷文件內容格式是否正確,必填項是否已填寫

 

依據HTML5的FileReader,可以使用新的API打開本地文件(參考這篇文章

  • FileReader.readAsBinaryString(Blob|File)
  • FileReader.readAsText(Blob|File, opt_encoding)
  • FileReader.readAsDataURL(Blob|File)
  • FileReader.readAsArrayBuffer(Blob|File)

 

通過 readAsBinaryString 雖然能打開二進位文件(*.pdf、*.doc、*.xls等),但如若要直接通過JS進行判斷這些二進位數據是否符合要求,是不行的

所以就需要轉換,對於Excel文件的內容分析轉換,已經有了比較成熟的解決方案:js-xlsx 

其實現方式也用到了上述新特性,看看具體要怎麼用

 

1. 首先定義一個文件上傳項

<input type="file" id="excel-file">

2. 下載js-xlsx的相應的 xlsx.core.min.js 文件後引入

<script type="text/javascript" src="xlsx.core.min.js"></script>

3. 監聽文件選擇,即時打開文件獲取表格內容

使用XLSX.utils.sheet_to_json方法解析表格對象返回相應的JSON數據

    $('#excel-file').change(function(e) {
            var files = e.target.files;

            var fileReader = new FileReader();
            fileReader.onload = function(ev) {
                try {
                    var data = ev.target.result,
                        workbook = XLSX.read(data, {
                            type: 'binary'
                        }), // 以二進位流方式讀取得到整份excel表格對象
                        persons = []; // 存儲獲取到的數據
                } catch (e) {
                    console.log('文件類型不正確');
                    return;
                }

                // 表格的表格範圍,可用於判斷表頭是否數量是否正確
                var fromTo = '';
                // 遍歷每張表讀取
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        fromTo = workbook.Sheets[sheet]['!ref'];
                        console.log(fromTo);
                        persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        // break; // 如果只取第一張表,就取消註釋這行
                    }
                }

                console.log(persons);
            };

            // 以二進位方式打開文件
            fileReader.readAsBinaryString(files[0]);
        });

上述代碼只是簡單地獲取表格文件的內容,如果要判斷,還得根據實際加上一些判斷邏輯

js-xlsx只能讀取相關的文件,否則會報錯

 

4. 表格文件內容

使用一個excel表格,定義了三張表

5. 查看獲取到的數據

紅框部分為三個表項的不同之處,看看代碼執行之後的結果:

第一個紅框是每張表的數據範圍,由於js-xlsx這個庫自身的問題,它是不會直接獲取到表頭數據保存起來的,而是直接把表頭放到最末級的內容對象裡面

可自行逐級看看讀取到的表格workbook對象內容:

如果要判斷表頭的數量,就需要使用到!ref屬性

在excel文件中,A1:D3中的字母指代列待號,緊接其後的數字指代行號,所以判斷表頭數量,即為判斷列號數量

比如第一張表有四個表頭,所以為A-D;第三張表有五個表頭,所以為A-E,如

if (fromTo[0] === 'A' && fromTo[3] === 'D') {
     excelIsOk = true;
}

 這隻是單單判斷表頭數量,還得判斷表頭內容

            console.log(persons);

                var headStr = '姓名,性別,年齡,學校';
                for (var i = 0; i < persons.length; i++) {
                    if (Object.keys(persons[i]).join(',') !== headStr) {
                        persons.splice(i, 1);
                    }
                }

                console.log(persons);

可以看到,倒數第二項的JSON數據,因為表頭內容不匹配,被過濾掉了

這裡還得註意的是最後一項,雖然有個表頭,但因為沒有內容,所以得到的JSON是符合要求的,所以就需要用到那個!ref屬性來共同判斷表格是否符合要求

 

 

6. 其他

除此之外,還有更多用法如XLSX.readFileXLSX.writeFile等,具體就看看官方文檔

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 設計模式系列-01-開篇 設計模式系列-02-創建模式-簡單工廠 文字恐懼者請看腦圖 http://naotu.baidu.com/file/7cdf927d18994f1543651245cac6c538?token=6dd2bea9552cf4f1 1.設計模式 設計模式(Design patt ...
  • 前言 在解決了上一次關於超級話題積分bug後,又接到超級話題簽到提醒的產品需求。這是一篇偏於技術實現的文章,講述的比較籠統,業務圍繞超級話題的簽到提醒進行展開。如果,您對超級話題簽到提醒的技術背景與實現感興趣,那麼這篇文章希望對你有幫助。 產品 最近,在忙活超級話題的簽到提醒產品的開發。首先,這是第 ...
  • 一、前言 之前便瞭解過,Struts 2的核心控制器是一個Filter過濾器,負責攔截所有的用戶請求,當用戶請求發送過來時,會去檢測struts.xml是否存在這個action,如果存在,伺服器便會自動幫我們跳轉到指定的處理類中去處理用戶的請求,基本流程如下: 該流程筆者理解是基本流程,。如果有不對 ...
  • 1.1概述 用一個中介對象來封裝一系列的對象交互。中介者使各對象不需要顯示地相互引用,從而使其耦合鬆散,而且可以獨立地改變它們之間的交互。這就是中介者模式的定義。 一個對象含有另一個對象的引用是面向對象中經常使用的方式,也是面向對象所提倡的,即少用繼承多用組合。但是怎樣合理地組合對象對系統今後的擴展 ...
  • 實例範圍決定如何在請求之間共用服務。 原文地址:http://docs.autofac.org/en/latest/lifetime/instance-scope.html 每個依賴一個實例 使用這個選項,每次請求服務都會返回一個新實例。使用 InstancePerDependency() 指定。這 ...
  • 1.1概述 提供一種方法順序訪問一個聚合對象中的各個元素,而又不需要暴露對象的內部表示。這就是迭代器模式的定義。 合理組織數據的結構以及相關操作是程式設計的一個重要方面,比如在程式設計中經常會使用諸如鏈表、散列表等數據結構。鏈表和散列表等數據結構都是可以存放若幹個對象的集合,其區別是按照不同的方式進 ...
  • 1.UML簡介Unified Modeling Language (UML)又稱統一建模語言或標準建模語言。 簡單說就是以圖形方式表現模型,根據不同模型進行分類,在UML 2.0中有13種圖,以下是他們的主要用途簡介: 1.用例圖:對系統的使用方式分類. 2.類圖:顯示類和它們的相互關係。 3.對象 ...
  • 尾調用優化(Tail Call Optimization) 尾調用是指函數的最後一條語句是函數調用,比如下麵的代碼: 在ES5中,尾調用和其他形式的函數調用一樣:腳本引擎創建一個新的函數棧幀並且壓在當前調用的函數的棧幀上面。也就是說,在整個函數棧上,每一個函數棧幀都會被保存,這有可能造成調用棧占用內 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...