用JavaScript把CSV与Excel转为Json

做者：Yann Mulonda

翻译：疯狂的技术宅

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

未经容许严禁转载

有两个 JavaScript 插件可用于读取和处理 CSV 和 Excel 文件，以后仅对本身的脚本进行编码便可。

CSV 表示 ：用逗号分隔值

这是一种文件格式，用于存储表格数据，如电子表格或数据库等。 能够将 CSV 格式的文件导入或导出到将数据存储在表中的程序中。

JSON： JavaScript 对象符号

个人项目结构和文件的截图

在本教程中，咱们将探索并演示如何把数据以 CSV 格式存储，并把一个 Excel 文件解析为 JSON 格式，以及怎样用 jQuery-CSV 和 SheetJS js-xlsx 库将数据显示为 HTML。

咱们还会将探讨如何进行 Ajax 调用并获取请求。

读取并处理CSV文件

让咱们继续，在 index.html 文件的 "head tag" 中添加 jQuery-CSV 库依赖：

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

正如你在上面看到的那样，个人项目文件夹中包含如下示例 CSV 文件：

FIRST NAME	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 */
}

---

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13个帮你提升开发效率的现代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？从调用栈到Promise你须要知道的一切
• WebSocket实战：在 Node 和 React 之间进行实时通讯
• 关于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30分钟用Node.js构建一个API服务器
• Javascript的对象拷贝
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程彻底指南
• 把HTML转成PDF的4个方案及实现

---

• 更多文章...