利用JavaScript将Excel转换为JSON示例代码

下面是利用JavaScript将Excel转换为JSON的完整攻略:

1. 准备工作

首先需要准备两个库:FileSaver.jsXLSX.jsFileSaver.js用于保存文件,而XLSX.js则用于解析excel文件。

npm install file-saver xlsx

在HTML中引入相关库:

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/file-saver/dist/FileSaver.min.js"></script>

2. 读取Excel文件

首先需要定义一个<input>元素,用于选择excel文件,并监听onchange事件,同时定义一个<table>元素用于展示选择的文件的数据。

<input type="file" id="file-input" onchange="loadFile(event)">
<table id="table"></table>

然后通过FileReader读取文件:

function loadFile(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function (event) {    
    const data = event.target.result;
    const worksheet = XLSX.read(data, { type: 'binary' }).Sheets.Sheet1;

    // TODO: 显示数据到表格中
  };
  reader.readAsBinaryString(file);
}

XLSX.read()方法会将excel文件解析为一个数据对象,其中Sheet1代表的是excel中的第一个工作表格。

3. 将数据转换为JSON格式

worksheet转换成一个二维数组:

const rows = XLSX.utils.sheet_to_row_object_array(worksheet);

接下来通过JSON.stringify()方法将数据转换成JSON格式:

const jsonData = JSON.stringify(rows);

4. 下载JSON文件

最后使用FileSaver.js将JSON文件保存到本地:

const blob = new Blob([jsonData], { type: 'application/json' });
saveAs(blob, 'data.json');

其中,Blob表示原始二进制数据对象,需要将JSON字符串转换成Blob对象,然后通过saveAs()方法将文件保存到本地。

示例

下面给出一个完整的示例,读取一个包含了学生信息的excel文件,并将数据转换成JSON格式并保存到本地:

<input type="file" id="file-input" onchange="loadFile(event)">
<button onclick="download()">下载</button>
<table id="table"></table>

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/file-saver/dist/FileSaver.min.js"></script>
<script>
  let worksheet;
  let headers;

  function loadFile(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function (event) {
      const data = event.target.result;
      worksheet = XLSX.read(data, { type: 'binary' }).Sheets.Sheet1;
      const rows = XLSX.utils.sheet_to_row_object_array(worksheet);
      headers = Object.keys(rows[0]);
      renderTable(rows);
    };
    reader.readAsBinaryString(file);
  }

  function renderTable(rows) {
    const table = document.getElementById('table');
    table.innerHTML = '';
    const headerRow = document.createElement('tr');
    headers.forEach((header) => {
      const cell = document.createElement('th');
      cell.textContent = header;
      headerRow.appendChild(cell);
    });
    table.appendChild(headerRow);
    rows.forEach((row) => {
      const rowElem = document.createElement('tr');
      headers.forEach((header) => {
        const cell = document.createElement('td');
        cell.textContent = row[header];
        rowElem.appendChild(cell);
      });
      table.appendChild(rowElem);
    });
  }

  function download() {
    const rows = XLSX.utils.sheet_to_row_object_array(worksheet);
    const jsonData = JSON.stringify(rows);
    const blob = new Blob([jsonData], { type: 'application/json' });
    saveAs(blob, 'data.json');
  }
</script>

这里的示例代码可以将读取到的Excel表格信息使用一个表格显示出来,并提供了一个“下载”按钮,用户点击后就能将Excel表格数据转化为JSON格式并下载。用户可以根据实际需求对此进行优化或拓展,以便于更好地将Excel表格转成JSON文件。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:利用JavaScript将Excel转换为JSON示例代码 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • js用Date对象的setDate()函数对日期进行加减操作

    下面是js用Date对象的setDate()函数对日期进行加减操作的完整攻略: 1. setDate()函数简介 setDate()函数是Date对象自带的一个函数,用于设置Date对象所代表的日期中的天数部分。setDate()函数的具体语法是: Date.setDate(dayValue) 其中dayValue是一个数值,代表要设置的天数。当dayVal…

    JavaScript 2023年5月27日
    00
  • JavaScript 参数中的数组展开 [译]

    文章“JavaScript 参数中的数组展开 [译]”介绍了JavaScript的一个很有用的语法特性:展开运算符(spread operator)。在函数参数中使用展开运算符可以方便地将数组或对象中的内容“展开”成独立的元素,方便使用。本文将对这一语法进行详细讲解。 什么是展开运算符? 展开运算符用符号“…”表示,它可以将一个数组或者类数组对象中的所有…

    JavaScript 2023年5月27日
    00
  • JS正则表达式验证账号、手机号、电话和邮箱是否合法

    下面我将介绍使用JavaScript正则表达式来验证账号、手机号、电话和邮箱是否合法的方法。 验证账号 账号的验证规则是由字母、数字、下划线组成的,长度为4-16位。我们可以使用正则表达式来进行验证。具体代码如下: function validateUsername(username) { var pattern = /^[a-zA-Z0-9_]{4,16}…

    JavaScript 2023年6月10日
    00
  • JSDoc 介绍使用规范JsDoc的使用介绍

    下面是关于JSDoc的完整攻略。 JSDoc 介绍 JSDoc是一个用于生成JavaScript代码文档的工具,它基于JavaScript的文档注释来生成文档。JSDoc支持多种标记,并且可以生成HTML、Markdown等多种格式的文档,因此广泛应用于JavaScript项目的文档生成中。 使用规范 以下是一些JSDoc的使用规范: 常见标记 @param…

    JavaScript 2023年5月27日
    00
  • js 回车提交表单两种实现方法

    让我为你详细讲解一下“js 回车提交表单两种实现方法”的完整攻略。 1. 利用form表单的onsubmit事件 我们可以通过在form表单上绑定一个onsubmit事件来实现回车提交表单的功能。下面是一段示例代码: <form onsubmit="return false;"> <input type="te…

    JavaScript 2023年6月10日
    00
  • 实例解析package.json和最常见的scripts字段

    关于“实例解析package.json和最常见的scripts字段”的攻略,我会提供如下内容: 一、什么是package.json? package.json是Node.js项目中杂项文件中最重要的一份,其定义了项目的基本信息和开发所需的各种依赖以及构建、打包、测试等各个方面的命令和配置。通过这个文件,我们可以更好地管理项目依赖、规范版本、运行脚本等,也可以…

    JavaScript 2023年5月27日
    00
  • JavaScript实现与web通信的方法详解

    下面我将详细讲解“JavaScript实现与web通信的方法详解”的完整攻略。 JavaScript实现与Web通信的方法详解 1. HTTP请求 HTTP请求是一种在Web中广泛使用的通信方式。浏览器可以利用XMLHttpRequest对象或fetch API发出HTTP请求,并用于获取Web服务器上的数据。HTTP请求可使用以下方法之一: GET:从指定…

    JavaScript 2023年5月27日
    00
  • js判断登陆用户名及密码是否为空的简单实例

    下面我将为您详细讲解“js判断登陆用户名及密码是否为空的简单实例”的完整攻略。 前置知识 在实现本例中,需要您掌握以下基础知识: HTML基础语法 JavaScript基础语法 表单基本操作 实现步骤 1. 创建表单 首先,我们需要在HTML代码中创建一个表单,用于用户输入用户名和密码: <form id="login-form"&…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部