JavaScript前端读取Excel文件的实战指南

npm install xlsx

import * as XLSX from 'xlsx';

import * as XLSX from 'xlsx';

function handleFile(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const json = XLSX.utils.sheet_to_json(worksheet);
    console.log(json);
  };
  reader.readAsArrayBuffer(file);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

<input type="file" id="excel-file" accept=".xlsx, .xls" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
  document.getElementById('excel-file').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = function(evt) {
      const data = new Uint8Array(evt.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const sheetName = workbook.SheetNames[0];
      const sheet = workbook.Sheets[sheetName];
      const jsonData = XLSX.utils.sheet_to_json(sheet);
      console.log(jsonData);
    };
    reader.readAsArrayBuffer(file);
  });
</script>

<template>
  <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(sheet);
        console.log(jsonData);
      };
      reader.readAsArrayBuffer(file);
    }
  }
}
</script>

try {
  const workbook = XLSX.read(data, { type: 'array' });
} catch (error) {
  console.error("Excel文件解析失败：", error);
}

import * as XLSX from 'xlsx';
import cptable from 'xlsx/dist/cpexcel.full.js';

XLSX.set_cptable(cptable);

function handleFile(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const sheet = workbook.Sheets[workbook.SheetNames[0]];
    const json = XLSX.utils.sheet_to_json(sheet);
    console.log(json);
  };
  reader.readAsArrayBuffer(file);
}

graph TD
    A[用户选择Excel文件] --> B[通过FileReader读取文件]
    B --> C{判断文件类型}
    C -->| .xls | D[XLSX.read解析文件]
    C -->| .xlsx | D
    D --> E[获取Workbook对象]
    E --> F[获取SheetNames数组]
    F --> G[访问指定Sheet对象]
    G --> H[XLSX.utils.sheet_to_json转换数据]
    H --> I[输出JSON数组]

<input type="file" id="excelFile" accept=".xlsx,.xls" />

document.getElementById('excelFile').addEventListener('change', function(e) {
    const file = e.target.files[0];  // 获取用户选择的第一个文件
    if (file) {
        const reader = new FileReader();  // 创建FileReader对象
        reader.onload = function(event) {
            const data = new Uint8Array(event.target.result);  // 转换为二进制数组
            const workbook = XLSX.read(data, { type: 'array' });  // 使用js-xlsx解析
            console.log(workbook);  // 输出解析后的workbook对象
        };
        reader.readAsArrayBuffer(file);  // 以ArrayBuffer形式读取文件
    }
});

const workbook = XLSX.readFile('data.xlsx', {
    type: 'file',
    cellDates: true
});
console.log(workbook);

graph TD
    A[用户选择Excel文件] --> B{判断文件扩展名}
    B -->| .xls | C[使用XLSX.readFile读取]
    B -->| .xlsx | D[使用XLSX.readFile读取]
    C --> E[解析为Workbook对象]
    D --> E
    E --> F[输出解析结果]

{
  SheetNames: ['Sheet1', 'Sheet2'],
  Sheets: {
    Sheet1: { '!ref': 'A1:D10', A1: { v: 'Header1', t: 's' }, ... },
    Sheet2: { '!ref': 'A1:C5', A1: { v: 'Data1', t: 's' }, ... }
  },
  Props: { ... },
  Custprops: { ... }
}

console.log(workbook.SheetNames); // ['Sheet1', 'Sheet2']

const sheet = workbook.Sheets['Sheet1'];
console.log(sheet['A1']); // { v: 'Header1', t: 's' }

const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];

for (let i = 1; i <= 10; i++) {
    const cell = worksheet['A' + i];
    if (cell) {
        console.log(`A${i}:`, cell.v);
    }
}

const workbook = XLSX.readFile('example.xlsx');
console.log(workbook.SheetNames);
// 输出类似 ["Sheet1", "Sheet2"]

const sheetNames = workbook.SheetNames;
const sheets = workbook.Sheets;

sheetNames.forEach(sheetName => {
    const sheet = sheets[sheetName];
    console.log(`Sheet: ${sheetName}`, sheet);
});

const sheet = workbook.Sheets['Sheet1'];
const cellA1 = sheet['A1'];
console.log(cellA1);

{
  "v": "姓名",
  "t": "s",
  "w": "姓名"
}

function getCellValue(cell) {
    if (!cell) return '';
    switch(cell.t) {
        case 's': // 字符串
            return cell.v;
        case 'n': // 数值
            return cell.v;
        case 'd': // 日期
            return cell.w;
        case 'b': // 布尔值
            return cell.v ? '是' : '否';
        case 'e': // 错误
            return '错误值: ' + cell.w;
        default:
            return '';
    }
}

const workbook = XLSX.readFile('data.xlsx');
workbook.SheetNames.forEach((sheetName, index) => {
    console.log(`第 ${index + 1} 个工作表名称：${sheetName}`);
});

graph TD
    A[开始] --> B[读取Excel文件]
    B --> C[获取SheetNames数组]
    C --> D[遍历数组]
    D --> E[输出每个Sheet名称]
    E --> F[结束]

function getSheetData(sheetName) {
    const sheet = workbook.Sheets[sheetName];
    const data = [];

    const range = XLSX.utils.decode_range(sheet['!ref']);
    for (let row = range.s.r; row <= range.e.r; row++) {
        const rowData = [];
        for (let col = range.s.c; col <= range.e.c; col++) {
            const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
            const cell = sheet[cellAddress];
            rowData.push(getCellValue(cell));
        }
        data.push(rowData);
    }
    return data;
}

const workbook = XLSX.read(data, { type: 'array' });
const sheetNames = workbook.SheetNames;
console.log(sheetNames); // 输出所有工作表名称，例如：["Sheet1", "Sheet2"]

sheetNames.forEach((name, index) => {
    console.log(`工作表${index + 1}名称为：${name}`);
});

const sheetName = sheetNames[0]; // 获取第一个工作表名称
const worksheet = workbook.Sheets[sheetName]; // 获取工作表对象
console.log(worksheet);

const aoa = XLSX.utils.sheet_to_aoa(worksheet);
console.log(aoa);

{
  "!ref": "A1:C3",
  "A1": { "t": "s", "v": "姓名" },
  "B1": { "t": "s", "v": "年龄" },
  "C1": { "t": "s", "v": "性别" },
  "A2": { "t": "s", "v": "张三" },
  "B2": { "t": "n", "v": 28 },
  "C2": { "t": "s", "v": "男" }
}

<table id="excelTable" border="1"></table>

function renderTable(sheetData) {
    const table = document.getElementById('excelTable');
    table.innerHTML = ''; // 清空旧数据

    // 遍历二维数组
    sheetData.forEach(row => {
        const tr = document.createElement('tr');
        row.forEach(cell => {
            const td = document.createElement('td');
            td.textContent = cell;
            tr.appendChild(td);
        });
        table.appendChild(tr);
    });
}

// 示例：读取第一个工作表并渲染
const sheetName = sheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const aoa = XLSX.utils.sheet_to_aoa(worksheet);
renderTable(aoa);

<select id="sheetSelector"></select>
<table id="excelTable" border="1"></table>

const sheetSelector = document.getElementById('sheetSelector');

// 填充下拉框
sheetNames.forEach(name => {
    const option = document.createElement('option');
    option.value = name;
    option.textContent = name;
    sheetSelector.appendChild(option);
});

// 监听下拉框变化
sheetSelector.addEventListener('change', () => {
    const selectedSheet = sheetSelector.value;
    const worksheet = workbook.Sheets[selectedSheet];
    const aoa = XLSX.utils.sheet_to_aoa(worksheet);
    renderTable(aoa);
});

graph TD
    A[用户选择工作表] --> B[获取工作表名称]
    B --> C[从workbook中获取对应Sheet]
    C --> D[转换为二维数组]
    D --> E[渲染为HTML表格]

const worksheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(worksheet, {
  header: 1, // 设置第一行为表头
  defval: null, // 空值用 null 填充
  raw: true // 禁止自动转换数据类型
});

[
  { "姓名": "张三", "年龄": 25 },
  { "姓名": "李四", "年龄": 30 }
]

[
  { "A": "姓名", "B": "年龄" },
  { "A": "张三", "B": 25 }
]

const filteredData = jsonData.filter(row => Object.values(row).some(cell => cell !== null && cell !== ""));

const renamedData = jsonData.map(row => ({
  name: row['姓名'],
  age: row['年龄']
}));

// 筛选年龄大于25的数据
const adults = renamedData.filter(person => person.age > 25);

// 提取所有名字
const names = renamedData.map(person => person.name);

const validData = renamedData.filter(person => {
  if (typeof person.age !== 'number') {
    console.warn('年龄字段错误:', person);
    return false;
  }
  return true;
});

try {
  const jsonData = XLSX.utils.sheet_to_json(worksheet);
} catch (e) {
  console.error('数据转换失败:', e);
}

<input type="file" id="excelFile" accept=".xlsx, .xls" />
<table id="dataTable"></table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
  document.getElementById('excelFile').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = function(event) {
      const data = new Uint8Array(event.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const sheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[sheetName];

      // 转换为JSON数组
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

      // 手动映射字段
      const renamedData = jsonData.slice(1).map(row => ({
        name: row[0],
        age: row[1]
      }));

      // 渲染到HTML表格
      const table = document.getElementById('dataTable');
      table.innerHTML = '';
      renamedData.forEach(person => {
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${person.name}</td><td>${person.age}</td>`;
        table.appendChild(tr);
      });
    };

    reader.readAsArrayBuffer(file);
  });
</script>

console.log('原始数据:', jsonData);
console.log('映射后数据:', renamedData);