用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 库依赖：

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

FIRST NAME	LAST NAME	EMAIL ADDRESS	PHONE NUMBER	CITY	STATE
	Frank	Riley	[email protected]	123-456-7890	New York	New York
	Steve	Brannigan	[email protected]	123-456-1290	San Francisco	California
	Marie	Ambrose	[email protected]	123-976-7890	Dallas	Texas
	Yann	Mulonda	[email protected]	321-854-5842	Minneapolis	Minnesota
	Chris	Martins	[email protected]	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(

                '
' + 
                    
                    '' +
                        value['FIRST NAME'] +
                    '' +

                    '' +
                        value['LAST NAME'] +
                    '' +

                    '' +
                        value.CITY +
                    '' +

                    '' + 
                        value['PHONE NUMBER'] +
                    '' +

                    '' +
                        value['EMAIL ADDRESS'] +
                    '' +

                '
'
            );

        });

    } // 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 库依赖项：

使用 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(

            '' +
                '' +
                    value['FIRST NAME'] +
                '' + 
                '' +
                    value['LAST NAME'] +
                '' +  
                '' +
                    '' +
                        value.AGE +
                    '' +
                '' +
                '' +
                    value.CLUB +
                '' +
                '' +
                    value.CITY +
                '' +
            ''
        );
    });
});

有趣的是，我用了 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个方案及实现

---

• 更多文章...