使用JS解析excel文件的完整实现步骤

使用JS解析excel文件的完整实现步骤如下：

1. 使用FileReader读取Excel文件

使用Javascript中的FileReader对象来获取Excel文件中的数据。代码示例如下：

let file = document.querySelector('#input-file').files[0]; // 获取文件对象
let reader = new FileReader(); // 创建FileReader对象
reader.readAsArrayBuffer(file); // 将文件读取为ArrayBuffer格式

2. 把Excel文件转换为JSON

我们需要借助开发者提供的exceljs类库，将Excel文件转换为JSON格式。代码示例如下：

let workbook = new Excel.Workbook(); // 创建exceljs的workbook对象
let data = []; // 装载解析后的数据
workbook.xlsx.load(data).then(() => {
  let worksheet = workbook.getWorksheet(1); // 获取第一张Sheet表
  worksheet.eachRow((row, rowNumber) => {
    if (rowNumber > 1) { // 第一行是表头，忽略
      let rowData = [];
      row.eachCell((cell, colNumber) => {
        rowData.push(cell.value);
      });
      data.push(rowData); // 添加行数据到data数组中
    }
  });
});

3. 显示JSON数据

将读取的JSON数据显示在网页中，可以通过创建HTML表格的方式来展示：

let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');

// 创建表头
let headerRow = document.createElement('tr');
for (let i = 0; i < headers.length; i++) {
  let th = document.createElement('th');
  th.appendChild(document.createTextNode(headers[i]));
  headerRow.appendChild(th);
}
thead.appendChild(headerRow);
table.appendChild(thead);

// 创建表格数据
for (let i = 0; i < data.length; i++) {
  let row = document.createElement('tr');
  for (let j = 0; j < data[i].length; j++) {
    let cell = document.createElement('td');
    cell.appendChild(document.createTextNode(data[i][j]));
    row.appendChild(cell);
  }
  tbody.appendChild(row);
}
table.appendChild(tbody);

// 将表格添加到页面中
let tableDiv = document.querySelector('#table-div');
tableDiv.innerHTML = '';
tableDiv.appendChild(table);

代码示例（基于exceljs v4+）：

// 导入依赖
import ExcelJS from 'exceljs/dist/es5/exceljs.browser';
import saveAs from 'file-saver';

/**
 * 使用JS解析excel文件
 * @param {File} file Excel文件对象
 * @returns {Array<Array<any>>} 解析后的数据
 */
const parseExcelFile = async (file) => {
  const workbook = new ExcelJS.Workbook(); // 创建workbook对象
  const data = []; // 解析后的数据

  await workbook.xlsx.load(file); // 加载Excel文件

  const worksheet = workbook.getWorksheet(1); // 获取第一张Sheet表

  worksheet.eachRow((row, rowNumber) => { // 遍历Sheet表中的每一行
    if (rowNumber > 1) { // 忽略表头
      const rowData = [];

      row.eachCell((cell) => { // 遍历行中的每一个单元格
        rowData.push(cell.value);
      });

      data.push(rowData); // 将行数据添加到数组中
    }
  });

  return data;
};

/**
 * 导出JSON数据为Excel文件
 * @param {Array<Array<any>>} data JSON格式的数据
 * @param {string} filename 导出的Excel文件名
 */
const exportJsonToExcel = (data, filename) => {
  const workbook = new ExcelJS.Workbook(); // 创建workbook对象
  const worksheet = workbook.addWorksheet('Sheet1'); // 创建Sheet表

  // 添加表头
  const headers = Object.keys(data[0]);
  worksheet.addRow(headers);

  // 添加数据行
  data.forEach((row) => {
    worksheet.addRow(row);
  });

  workbook.xlsx.writeBuffer().then((buffer) => { // 写入Excel内容到buffer中
    const blob = new Blob([buffer], { type: 'application/vnd.ms-excel' });
    saveAs(blob, `${filename}.xlsx`); // 下载文件
  });
};

// 读取Excel文件并解析为JSON数据
const inputFile = document.getElementById('input-file');
inputFile.addEventListener('change', () => {
  const file = inputFile.files[0];
  if (file) {
    parseExcelFile(file).then((data) => {
      console.log(data);
    });
  }
});

// 导出JSON数据为Excel文件
const data = [
  { name: 'Tom', age: 18, gender: 'male' },
  { name: 'Alice', age: 20, gender: 'female' },
  { name: 'Jerry', age: 22, gender: 'male' },
];
const exportBtn = document.getElementById('export-btn');
exportBtn.addEventListener('click', () => {
  exportJsonToExcel(data, 'test');
});

参考链接：使用JavaScript解析和导出Excel文件。

以上就是使用JS解析Excel文件的完整实现步骤，并附有两个具体的示例。