前端实现（excel）xlsx文件预览

使用的框架: React

要使用的库: exceljs、handsontable

1. 概述

接到一个任务，是要前端实现文件预览效果，百度了一圈，发现也没有什么好的方法可以完美的将表格渲染出来。在前端中有sheetjs和exceljs可以对xlsx文件进行解析，本来一开始我用的是sheetjs，但是在样式获取上遇到了麻烦，所以我改用了exceljs，不过很难受，在样式获取时同样遇到了不小的麻烦，但是我懒得换回sheetjs了，那就直接使用exceljs吧。

要实现xlsx文件预览效果，我的想法是使用一个库对xlsx文件进行解析，然后使用另一个库对解析出来的数据在页面上进行绘制，综上，我采用的方案是：exceljs+handsontable

2. 实现步骤

2.1 安装库

使用命令: npm i exceljs handsontable @handsontable/react

2.2 使用exceljs解析数据并使用handsontable进行渲染

直接贴代码了：

import Excel from 'exceljs' import { useState } from 'react'; import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; import { textRenderer, registerRenderer } from 'handsontable/renderers'; // 注册模块 registerAllModules(); export default function XLSXPreView() { const [data, setData] = useState([]); const handleFile = async (e) => { const file = e.target.files[0]; const workbook = new Excel.Workbook(); await workbook.xlsx.load(file) // 第一个工作表 const worksheet = workbook.getWorksheet(1); // 遍历工作表中的所有行（包括空行） const sheetData = []; worksheet.eachRow({ includeEmpty: true }, function(row, rowNumber) { // console.log('Row ' + rowNumber + ' = ' + JSON.stringify(row.values)); // 使用row.values获取每一行的值时总会多出一条空数据(第一条)，这里我把它删除 const row_values = row.values.slice(1); sheetData.push(row_values) }); setData(sheetData); } return ( <> <input type="file" onChange={handleFile}/> <div id='table_view'> <HotTable data={data} readOnly={true} rowHeaders={true} colHeaders={true} width="100vw" height="auto" licenseKey='non-commercial-and-evaluation'// 一定得加这个，handsontable是收费的，加了这个才能免费用 /> </div> </> ) }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52

到这里，已经实现了从xlsx文件中获取数据，并使用handsontable将表格中的数据渲染出来，示例结果如下，如果只需要将数据显示出来，并不需要将样式什么的一起复现了，那到这里就已经结束了！

但事实上，这并不是我要做到效果，我的xlsx里面还有样式什么的，也需要复现，头疼