用JavaScript把CSV與Excel轉爲Json

時間 2019-11-06

標籤 javascript csv excel 轉爲 json 欄目 JavaScript 简体版

原文原文鏈接

做者：Yann Mulonda
翻譯：瘋狂的技術宅javascript

原文：https://blog.bitsrc.io/csv-ex...css

未經容許嚴禁轉載html

有兩個 JavaScript 插件可用於讀取和處理 CSV 和 Excel 文件，以後僅對本身的腳本進行編碼便可。前端

CSV 表示 ：用逗號分隔值
這是一種文件格式，用於存儲表格數據，如電子表格或數據庫等。能夠將 CSV 格式的文件導入或導出到將數據存儲在表中的程序中。java

JSON： JavaScript 對象符號jquery

個人項目結構和文件的截圖ios

在本教程中，咱們將探索並演示如何把數據以 CSV 格式存儲，並把一個 Excel 文件解析爲 JSON 格式，以及怎樣用 jQuery-CSV 和 SheetJS js-xlsx 庫將數據顯示爲 HTML。git

咱們還會將探討如何進行 Ajax 調用並獲取請求。程序員

讀取並處理CSV文件

讓咱們繼續，在 index.html 文件的 "head tag" 中添加 jQuery-CSV 庫依賴：github

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.3/jquery.csv.min.js"></script>

正如你在上面看到的那樣，個人項目文件夾中包含如下示例 CSV 文件：

LAST NAME	EMAIL ADDRESS	PHONE NUMBER	CITY	STATE
Frank	Riley	frank@email.com	123-456-7890	New York	New York
Steve	Brannigan	steve@example.fr	123-456-1290	San Francisco	California
Marie	Ambrose	marie@yahoo.org	123-976-7890	Dallas	Texas
Yann	Mulonda	yann@example.com	321-854-5842	Minneapolis	Minnesota
Chris	Martins	chris@email.org	123-654-8542	Seattle	Washington

UsersSample.csv

注意：在腳本的最上方，我聲明瞭 API 變量，這些變量是項目文件夾中 CSV 和 Excel 文件的連接：

var csv_file_API = './UsersSample.csv';
var excel_file_API = './soccer_players.xlsx';

使用Ajax

「 Ajax是一種在後臺發送和檢索信息而無需刷新頁面的技術。它使瀏覽器可以發送和檢索信息，而後對返回的信息進行處理，例如在頁面上添加或修改 HTML。」

每當咱們用 JavaScript 發送或檢索信息時，都會啓動一個稱爲 Ajax 調用的事件。咱們能夠在沒有 jQuery 的狀況下執行Ajax，但必需要編寫 XMLHttpRequest，這有點複雜。經過 jQuery 的 Ajax 方法發起 Ajax 調用是最簡單的方法。資料來源： css-tricks.com

如今，在個人 script.js 文件中，將經過 Ajax 調用來讀取 CSV 文件，把數據結果轉換爲 JSON，並將其顯示在 HTML 頁面上的列表中。這是用 Jquery append 方法進行調用並顯示數據的代碼：

// read csv file and convert to json format
$.ajax({

    type: 'GET',

    url: csv_file_API,

    dataType: 'text',

    error: function (e) {
        alert('An error occurred while processing API calls');
        console.log("API call Failed: ", e);
    },

    success: function (data) {

        var jsonData = $.csv.toObjects(data);

        console.log(jsonData);

        $.each(jsonData, function (index, value) {

            $('#showCSV').append(

                '<li class="list-group-item d-flex justify-content-between align-items-center">' + 
                    
                    '<span style="margin-right: 2rem; font-size: 2rem; font-weight: bold; color: #37474F">' +
                        value['FIRST NAME'] +
                    '</span>' +

                    '<span style="margin-right: 2rem; font-size: 2rem; font-weight: bold; color: #37474F">' +
                        value['LAST NAME'] +
                    '</span>' +

                    '<span class="badge badge-primary badge-pill">' +
                        value.CITY +
                    '</span>' +

                    '<span class="badge warning-color-dark badge-pill">' + 
                        value['PHONE NUMBER'] +
                    '</span>' +

                    '<span class="badge success-color-dark badge-pill">' +
                        value['EMAIL ADDRESS'] +
                    '</span>' +

                '</li>'
            );

        });

    } // end: Ajax success API call

}); // end: of Ajax call

讀取和處理 Excel 文件

咱們將用 SheetJS js-xlsx （簡化的電子表格）讀取和處理 excel 文件。此 JavaScript 插件可在 Web 瀏覽器和服務器中使用。它支持全部 Excel 文件格式。在其 index.html 文件的「head tag」中經過content delivery network js （CDNjs）添加 XLSX 庫依賴項：

<script type="text/javascript" lang="javascript"src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.1/xlsx.full.min.js"></script>

使用 Fetch

以學習爲目的；讓咱們探討另外一種使用 Ajax 的方法。在近幾年中，瀏覽器有了很大的改進（我認爲 Internet Explorer 除外）。大多數瀏覽器如今都支持 Fetch API，這是 Ajax 的現代方式，能夠再也不須要 jQuery 或A xios 這樣的庫。

Fetch API 提供了一個 JavaScript 接口，用於訪問和處理 HTTP 管道的每一個部分，例如請求和響應等。它還提供了全局 fetch() 方法，該方法提供了一種簡單且合乎邏輯的方式來跨網絡異步獲取資源。 Fetch 還提供了一個邏輯位置來定義與 HTTP 相關的其餘概念，例如 CORS 和 HTTP 擴展。

所以，對於本教程的第二部分，咱們將用 fetch 來讀取 excel 文件並將數據結果轉換爲 JSON。這段代碼用於在 script.js 中請求文件並用 jQuery append 方法顯示數據：

// read Excel file and convert to json format using fetch
fetch('./soccer_players.xlsx').then(function (res) {
    /* get the data as a Blob */
    if (!res.ok) throw new Error("fetch failed");
    return res.arrayBuffer();
})
.then(function (ab) {
    /* parse the data when it is received */
    var data = new Uint8Array(ab);
    var workbook = XLSX.read(data, {
        type: "array"
    });

    /* *****************************************************************
    * DO SOMETHING WITH workbook: Converting Excel value to Json       *
    ********************************************************************/
    var first_sheet_name = workbook.SheetNames[0];
    /* Get worksheet */
    var worksheet = workbook.Sheets[first_sheet_name];

    var _JsonData = XLSX.utils.sheet_to_json(worksheet, { raw: true });
    /************************ End of conversion ************************/

    console.log(_JsonData);

    $.each(_JsonData, function (index, value) {

        $('#showExcel').append(

            '<tr>' +
                '<th scope="row">' +
                    value['FIRST NAME'] +
                '</th>' + 
                '<td>' +
                    value['LAST NAME'] +
                '</td>' +  
                '<td>' +
                    '<span class="badge badge-primary badge-pill p-2">' +
                        value.AGE +
                    '</span>' +
                '</td>' +
                '<td>' +
                    value.CLUB +
                '</td>' +
                '<td>' +
                    value.CITY +
                '</td>' +
            '</tr>'
        );
    });
});

有趣的是，我用了 Material Design Bootstrap 進行樣式和數據顯示。我還增長了額外的風格，使個人網頁更加時尚，能夠隨意設置頁面樣式。這是個人 HTML 頁面：

個人演示頁面截圖

若是你仍然沒法顯示數據並查看文件。能夠隨時檢出 個人 GitHub demo repository。

經過 GitHub Pages 實時部署 HTML 頁面

假設你已將項目文件存儲在GitHub中。那麼在項目存儲庫上：

前往「settings」
向下滾動到「GitHub Pages」選項

在「Source」下選擇 build branch。在個人案例中，我選擇了「master branch」。

選擇後，將爲你生成一個連接。只需此連接便可查看你的頁面並與他人共享。

在資源庫頁面的 「environment」 下也能夠找到相同的連接。

這是個人演示頁的連接：https://yannmjl.github.io/jsd...

若是瀏覽個人演示站點，你會注意到能夠頁面滾動，可是看不到滾動條。這是我經過添加 style.css 獲得的該功能的 CSS 樣式：

html, body {
  overflow: scroll;
  overflow-x: hidden;
  height: fit-content;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
  /* make scrollbar transparent */
}