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

yizhihongxing

下面是利用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开发中的页面、屏幕、浏览器的位置原理(高度宽度)说明讲解(附图)

    在JavaScript开发中,要理解页面、屏幕和浏览器的位置原理是非常重要的,这是因为在布局和交互方面都与这些位置相关联。下面将从高度和宽度两个方面详细讲解。 页面高度和宽度 在JavaScript中,可以通过下面的代码来获取页面的高度和宽度: var pageHeight = document.documentElement.scrollHeight; v…

    JavaScript 2023年6月11日
    00
  • PHP利用Cookie设置用户30分钟未操作自动退出功能

    下面是设置自动退出功能的完整攻略。 1. 首先需要了解什么是Cookie Cookie是一种存在于用户浏览器本地的数据。利用Cookie可以将信息保存在用户的电脑或移动设备上,以便进行持久化访问。PHP中可以使用setcookie()函数设置Cookie。 2. 利用setcookie()函数设置Cookie setcookie(name, value, e…

    JavaScript 2023年6月11日
    00
  • jquery对象和javascript对象即DOM对象相互转换

    将jQuery对象转换为DOM对象可以使用get()或[index]方法,将DOM对象转换成jQuery对象可以使用$()或jQuery()方法进行转换。 示例1:将jQuery对象转换成DOM对象 // 创建jQuery对象 var $elem = $(‘<div>’, {text: ‘Hello World!’}); // 将jQuery对象…

    JavaScript 2023年5月27日
    00
  • 什么是cookie?js手动创建和存储cookie

    关于”什么是cookie”的讲解: Cookie指的是一种服务器发送给浏览器的小型文本文件,在浏览器端保存用户的登录状态、购物车信息等。在下次用户访问同样的网站时,浏览器会将存在本地的Cookie信息发送给服务器,服务器根据接收到的Cookie信息来进行相应的处理。 Cookie有以下特点:- Cookie由服务器生成,浏览器存储。- 每次请求时需要将Coo…

    JavaScript 2023年6月11日
    00
  • JavaScript函数模式详解

    JavaScript函数模式详解 JavaScript函数模式是JavaScript语言中最常用的设计模式之一,在前端工程开发中具有很高的实用价值。本文将详细介绍JavaScript函数模式的各种形式以及使用场景。 普通函数 JavaScript中最基本的函数形式是普通函数,使用function关键字定义。普通函数可以通过函数名调用,也可以作为参数传递给其他…

    JavaScript 2023年5月18日
    00
  • ReactRouter的实现方法

    React Router是一个用于React的众所周知的网络路由库,它提供了多种方法来实现在单页面应用中创建多个视图的方法。在下面的攻略中,我们将探讨React Router的实现方法。 基本使用方法 使用React Router的第一步是使用npm安装React Router: npm install react-router-dom –save 接下来…

    JavaScript 2023年6月11日
    00
  • 使用JavaScript触发过渡效果的方法

    下面是使用JavaScript触发过渡效果的方法的完整攻略。 什么是CSS过渡效果 在介绍如何使用JavaScript触发过渡效果之前,先来简单介绍一下什么是CSS过渡效果。CSS过渡效果(CSS Transitions)是一种可以让元素在某个CSS属性发生变化的时候,产生平滑的动效的方法。 比如我们可以通过如下代码来让一个元素当宽度发生变化时,平滑地变宽:…

    JavaScript 2023年6月10日
    00
  • JavaScript实现二级菜单的制作

    下面是详细的JavaScript实现二级菜单的制作攻略: 1. 准备工作 在制作二级菜单之前,需要先准备好以下内容: 一个 HTML 文件 一个 CSS 文件 一个 JavaScript 文件 其中,HTML 文件是页面的基础结构,CSS 文件是用来美化页面的样式,JavaScript 文件则是用来实现菜单的交互效果的。 在 HTML 文件中,需要创建一个菜…

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