mg4355娱乐mg手机版 > www.4355.com >

用于存储表格数据

图片 1

有两个 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=""/script

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

FIRST NAME

LAST NAME

EMAIL ADDRESS

PHONE NUMBER

CITY

STATE

FrankRileyfrank@email.com123-456-7890New YorkNew YorkSteveBrannigansteve@example.fr123-456-1290San FranciscoCaliforniaMarieAmbrosemarie@yahoo.org123-976-7890DallasTexasYannMulondayann@example.com321-854-5842MinneapolisMinnesotaChrisMartinschris@email.org123-654-8542SeattleWashingto

注意:在脚本的最上方,我声明了 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' + 'span' + value['FIRST NAME'] + '/span' + 'span' + value['LAST NAME'] + '/span' + 'span' + value.CITY + '/span' + 'span' + value['PHONE NUMBER'] + '/span' + 'span' + 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 添加 XLSX 库依赖项:

scripttype="text/javascript"lang="javascript"src=""/script

使用 Fetch

以学习为目的;让我们探讨另一种使用 Ajax 的方法。在近几年中,浏览器有了很大的改进。 大多数浏览器现在都支持 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 fetchfetch('./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' + 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”下也可以找到相同的链接。

这是我的演示页的链接:

如果浏览我的演示站点,你会注意到可以页面滚动,但是看不到滚动条。 这是我通过添加 style.css 得到的该功能的 CSS 样式:

html, body { overflow: scroll; overflow-x: hidden; height: fit-content;}::-webkit-scrollbar { width: 0px; background: transparent; /* make scrollbar transparent */}

原文:

上一篇:value1}这种表示
下一篇:没有了