利用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实现数组去重的11种方法总结

    JS实现数组去重的11种方法总结 在JavaScript中,数组去重是经常会遇到的问题。本篇文章总结了11种常用的数组去重方法,包括传统的for循环遍历、使用ES6 Set、使用对象属性、使用Array.filter()高阶函数等方法。下面将逐一介绍这些方法。 1. 使用for循环遍历 这是最简单的一种方法,也是最经典的一种方法。遍历数组中的每个元素,将其与…

    JavaScript 2023年5月27日
    00
  • Java、Javascript、Javaweb三者的区别及说明

    Java、Javascript、Javaweb三者的区别及说明 Java Java是一种面向对象的编程语言,由Sun Microsystems公司于1995年推出。Java可广泛应用于网络编程、移动设备、大型应用程序等领域。Java代码可以在不同操作系统上运行,这主要归功于Java虚拟机(JVM)。Java是一种编译型语言,使用JDK(Java Develo…

    JavaScript 2023年5月18日
    00
  • 利用javascript查看html源文件

    想要在网页中查看HTML源文件,可以使用JavaScript来实现。具体的实现方法如下: 使用document.documentElement.outerHTML属性,将整个HTML源代码保存在该属性中,并将其打印到控制台上。 console.log(document.documentElement.outerHTML); 使用该方法能够查看整个HTML文档…

    JavaScript 2023年5月27日
    00
  • javascript常用的正则表达式实例

    以下是关于JavaScript常用的正则表达式实例的攻略。 正则表达式的基础知识 正则表达式是一种用于匹配字符串的方法,它基于一些规则来描述匹配模式。在JavaScript中,你可以用正则表达式去匹配一个字符串或者一个字符串数组。 在编写JavaScript中的正则表达式时,你需要使用RegExp对象。这个对象既可以通过字面量语法来创建,也可以从构造函数中实…

    JavaScript 2023年6月10日
    00
  • php中preg_replace正则替换用法分析【一次替换多个值】

    《PHP中preg_replace正则替换用法分析【一次替换多个值】》是一篇介绍PHP中正则替换的文章,主要介绍preg_replace函数中的一些使用技巧,可以一次替换多个值。 一、preg_replace函数 preg_replace是PHP中用于正则替换的函数。它的语法如下: preg_replace($pattern, $replacement, $…

    JavaScript 2023年6月10日
    00
  • JavaScript重定向URL参数的两种方法小结

    下面是JavaScript重定向URL参数的两种方法小结的详细攻略。 简介 在开发Web应用程序时,我们可能需要将用户重定向到另一个页面,并传递一些数据。这些数据可以作为URL参数传递。JavaScript可以轻松地重定向到另一个URL,并将参数添加到它上面。 本文将介绍两种JavaScript重定向URL参数的方法,分别是通过window.location…

    JavaScript 2023年6月11日
    00
  • JS实现处理时间,年月日,星期的公共方法示例

    下面是本文的详细讲解。 需求分析 在开发网站或应用时,我们经常需要对时间进行处理,例如获取当前时间、格式化时间、计算时间差等。因此,我们需要一个通用的方法来处理时间,以方便我们的开发工作。 在本文中,我们将使用JavaScript实现处理时间的公共方法。具体来说,我们将实现以下功能: 获取当前时间 将时间格式化为指定的格式 计算两个时间的时间差 获取某个日期…

    JavaScript 2023年5月27日
    00
  • javascript实现文字无缝滚动效果

    当我们需要在网页中展示一些较长的文字或新闻时,在有限的空间内显示全部内容是不现实的。这时,我们可以使用文字无缝滚动效果,将文字平滑滚动,以便在有限的空间内展示全部的内容。下面是javascript实现文字无缝滚动效果的完整攻略。 实现思路 首先,在HTML中创建一个容器,用来放置要滚动的文字。 使用CSS为容器设置样式,包括宽度、高度、背景色等,以及设置文字…

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