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

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

1. 准备工作

首先需要准备两个库：FileSaver.js 和 XLSX.js。FileSaver.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文件。

阅读剩余 61%