返回

excel_xlsx文件预览实现方案：助力前端工作者高效处理办公文档

前端

在前端轻松实现 Excel 文件预览：利用 SheetJS 和 ExcelJS 库

前言

在当今数字化时代，Excel 文件已成为数据管理和分析的关键工具。然而，在前端开发中，直接在网页上解析和渲染这些文件却并非易事。借助于强大的 JavaScript 库，例如 SheetJS 和 ExcelJS，我们能够轻松解决这一难题。

SheetJS 和 ExcelJS 库

  • SheetJS： 一个功能强大的库，可以读取和写入各种电子表格格式，包括 Excel XLSX 文件。它提供了一系列 API，便于我们解析和操作这些文件。
  • ExcelJS： 一个专门用于处理 Excel XLSX 文件的库。它提供了更丰富的功能，使我们能够创建、编辑和保存 Excel XLSX 文件。

如何使用 SheetJS 和 ExcelJS 预览 Excel 文件

1. 安装库

首先，通过 npm 安装这两个库：

npm install sheetjs exceljs

2. 读取文件

接下来，读取要预览的 Excel XLSX 文件。例如，通过本地文件读取：

const fs = require('fs');
const path = require('path');

const filePath = path.join(__dirname, 'path/to/file.xlsx');
const fileBuffer = fs.readFileSync(filePath);

3. 解析文件

  • SheetJS：
const workbook = XLSX.read(fileBuffer, {type: 'buffer'});
  • ExcelJS：
const workbook = new ExcelJS.Workbook();
await workbook.xlsx.load(fileBuffer);

4. 渲染文件

解析文件后，我们将解析后的数据渲染到网页上。可以使用 HTML、CSS 和 JavaScript 实现渲染。

5. 保存文件（可选）

如果需要保存修改后的 Excel XLSX 文件，可以使用 ExcelJS 库的保存方法：

await workbook.xlsx.save(filePath);

代码示例

以下示例演示如何使用 SheetJS 和 ExcelJS 库实现 Excel XLSX 文件预览：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sheetjs/0.10.0/xlsx.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/1.8.1/exceljs.min.js"></script>
</head>
<body>
  <input type="file" id="file-input" accept=".xlsx">
  <div id="preview-container"></div>

  <script>
    const fileInput = document.getElementById('file-input');
    const previewContainer = document.getElementById('preview-container');

    fileInput.addEventListener('change', (e) => {
      const file = e.target.files[0];

      const reader = new FileReader();
      reader.onload = (e) => {
        const fileBuffer = e.target.result;

        const workbook = XLSX.read(fileBuffer, {type: 'buffer'});

        const sheetNames = workbook.SheetNames;
        const sheetData = workbook.Sheets[sheetNames[0]];

        const table = document.createElement('table');
        table.classList.add('table', 'table-bordered');

        const thead = document.createElement('thead');
        const tr = document.createElement('tr');

        for (const key in sheetData) {
          if (key.startsWith('!')) continue;

          const th = document.createElement('th');
          th.innerText = key;

          tr.appendChild(th);
        }

        thead.appendChild(tr);

        const tbody = document.createElement('tbody');

        for (let i = 0; i < sheetData['!ref'].split(':')[1].match(/\d+/)[0]; i++) {
          const tr = document.createElement('tr');

          for (const key in sheetData) {
            if (key.startsWith('!')) continue;

            const td = document.createElement('td');
            td.innerText = sheetData[key][i] ? sheetData[key][i].v : '';

            tr.appendChild(td);
          }

          tbody.appendChild(tr);
        }

        table.appendChild(thead);
        table.appendChild(tbody);

        previewContainer.appendChild(table);
      };

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

结论

通过使用 SheetJS 和 ExcelJS 库，前端开发人员可以轻松实现 Excel XLSX 文件预览。这些库提供的强大功能使我们能够快速地集成此功能到我们的项目中，从而为用户提供便捷的数据可视化和处理体验。

常见问题解答

1. 如何在 ExcelJS 中获取工作表数据？

const worksheet = workbook.getWorksheet('Sheet1');
const data = worksheet.getRows();

2. 如何在 ExcelJS 中设置单元格值？

const worksheet = workbook.getWorksheet('Sheet1');
worksheet.getCell('A1').value = 'Hello World';

3. 如何在 SheetJS 中获得工作表名称？

const workbook = XLSX.read(fileBuffer, {type: 'buffer'});
const sheetNames = workbook.SheetNames;

4. 如何在 SheetJS 中获取单元格值？

const workbook = XLSX.read(fileBuffer, {type: 'buffer'});
const sheet = workbook.Sheets[sheetName];
const value = sheet[cellAddress].v;

5. 如何使用 ExcelJS 导出 Excel 文件？

const workbook = new ExcelJS.Workbook();
workbook.xlsx.save('output.xlsx');