import React, { useEffect, useRef, useState } from "react"; import { captain, camelCase } from "../utils"; import { HotTable } from "@handsontable/react"; import Handsontable from "handsontable"; import { registerLanguageDictionary, zhCN } from "handsontable/i18n"; import Exceljs from "exceljs"; import dayjs from "dayjs"; import { Segmented, message } from "antd"; import { indexedColors } from "../utils/color"; import "handsontable/dist/handsontable.full.css"; import "dayjs/locale/zh-cn"; // 注册locale dayjs.locale("zh-cn"); registerLanguageDictionary(zhCN); // 单元格边框设置 const borders = ["left", "right", "top", "bottom"]; // 修复矩阵的宽度（将不存在的节点设置为空值） const fixMatrix = (data, colLen) => { for (const row of data) { for (let j = 0; j < colLen; j++) { if (!row[j]) { row[j] = ""; } } } return data; }; // 获取sheet的单元格数量 const cols = (ws) => { return ws.columns.map((item) => item.letter); }; // sheet的每一个的column的宽度的渲染设置 const columns = (ws) => { return ws.columns.map((item) => ({ ...(item.width ? // 默认单元格宽度100 { width: item.width < 100 ? 100 : item.width } : { width: 100 }), className: alignToClass(item.alignment || {}), renderer: "styleRender", })); }; // 单元格样式的渲染设置 const cell = (ws) => { return ws.getRows(1, ws.actualRowCount).flatMap((row, ri) => { return ( row._cells // eslint-disable-next-line array-callback-return .map((cell, ci) => { if (cell.style) { return { row: ri, col: ci, ...(cell.alignment ? { className: alignToClass(cell.alignment) } : {}), style: { // 添加一个默认12px字体的样式 font: { size: 12, }, ...cell.style, }, }; } }) .filter((i) => i) ); }); }; // 单元格合并的渲染设置 const merge = (ws) => { const { _merges: merges = {} } = ws; return Object.values(merges).map(({ left, top, right, bottom }) => { // 构建区域 return { row: top - 1, col: left - 1, rowspan: bottom - top + 1, colspan: right - left + 1, }; }); }; // 根据单元格对齐方式分配 const alignToClass = ({ horizontal, vertical }) => { return [horizontal, vertical] .filter((i) => i) .map((key) => `ht${key.charAt(0).toUpperCase()}${key.slice(1)}`) .join(" "); }; // 获取主题样式 const parseTheme = (workbook) => { const theme = workbook._themes.theme1; const parser = new DOMParser(); if (theme) { const doc = parser.parseFromString(theme, "text/xml"); console.log(doc); const [{ children = [] } = {}] = doc.getElementsByTagName("a:clrScheme"); const themeColors = [...children] .flatMap((node) => [...node.getElementsByTagName("a:srgbClr")]) .map((node) => node.getAttribute("val")) .filter((i) => i); return themeColors; } return []; }; // 获取sheet的数据 const generateData = (ws) => { return fixMatrix( ws.getRows(1, ws.actualRowCount).map((row) => row._cells.map((item) => { const value = item.model.value; if (value) { // 判断是否为Date类型，如果是，进一步处理 if (value instanceof Date) { const date = dayjs(value); return date.format("YYYY-MM-DD HH:mm:ss"); } return value.richText ? value.richText.text : value; } return ""; }) ), cols(ws).length ); }; export default function Excel({ buffer, callback }) { const workbookRef = useRef(); const [selectedTab, setSelectedTab] = useState(); const [settings, setSettings] = useState({ // 默认配置 language: "zh-CN", readOnly: true, colHeaders: true, rowHeaders: true, height: "calc(95vh)", // 关闭外部点击取消选中时间的行为 outsideClickDeselects: false, licenseKey: "non-commercial-and-evaluation", // 加载配置 data: null, mergeCells: null, columns: null, cell: null, themeColors: null, // 当前展示的sheet currentSheet: null, // sheet总数量 sheetCount: null, }); useEffect(() => { const render = async () => { const workbook = await new Exceljs.Workbook().xlsx.load(buffer); workbookRef.current = workbook; const currentSheet = workbook.worksheets[0].id; const ws = workbook.getWorksheet(currentSheet); setSelectedTab(workbook.worksheets[0].name); setSettings((previous) => ({ ...previous, data: generateData(ws), mergeCells: merge(ws), columns: columns(ws), cell: cell(ws), themeColors: parseTheme(workbook), sheetCount: workbook.worksheets.length, currentSheet, })); callback(); }; render(); }, [buffer]); useEffect(() => { // 自定义渲染方式 Handsontable.renderers.registerRenderer( "styleRender", (hotInstance, TD, row, col, prop, value, cell) => { Handsontable.renderers.getRenderer("text")( hotInstance, TD, row, col, prop, value, cell ); if (workbookRef.current && cell.style) { const { style: { alignment: { wrapText } = {}, border, fill, font, }, } = cell; const style = TD.style; if (font) { if (font.bold) style.fontWeight = "bold"; if (font.size) style.fontSize = `${font.size}px`; } if (fill) { if (fill.bgColor) { const { argb, indexed } = fill.bgColor; style.backgroundColor = `#${ argb || indexedColors[indexed] }`; } if (fill.fgColor) { const { theme, indexed } = fill.fgColor; if (theme && settings.themeColors) { const color = settings.themeColors[theme + 1]; if (color) { style.color = `#${color}`; } } if (indexed) { style.color = `#${indexedColors[indexed]}`; } } } if (border) { borders .map((key) => ({ key, value: border[key] })) .filter((v) => v.value) .forEach((v) => { const { key, value: { style: borderStyle }, } = v; const prefix = `border${captain(key)}`; if (borderStyle === "thin") { style[`${prefix}Width`] = "1px"; } else { style[`${prefix}Width`] = "2px"; } style[`${prefix}Style`] = "solid"; style[`${prefix}Color`] = "#000"; }); } } // 启用了内联css，直接赋值 if (cell.css) { const style = TD.style; const { css } = cell; Object.keys(css).forEach((key) => { const k = camelCase(key); style[k] = css[key]; }); } } ); }, [settings.themeColors]); // 切换Sheet const handleChange = (value) => { const currentSheet = workbookRef.current.worksheets.find( (sheet) => sheet.name === value ).id; const ws = workbookRef.current.getWorksheet(currentSheet); console.log(value, currentSheet, ws); // 如果sheet里面没有数据说明是创建了表但没输入东西 if (!ws.columns) return message.warn("该表内部没有数据"); setSelectedTab(value); setSettings((previous) => ({ ...previous, data: generateData(ws), mergeCells: merge(ws), columns: columns(ws), cell: cell(ws), themeColors: parseTheme(workbookRef.current), sheetCount: workbookRef.current.worksheets.length, currentSheet, })); }; return (

{workbookRef.current && ( <> {/* 存在两个以上表时再渲染 */} {settings.sheetCount > 1 && ( sheet.name )} onChange={handleChange} /> )}

)}

); }

文档类型	npm包
pdf	`pdfjs-dist`
docx	`docx-preview`
xlsx	`exceljs`、`handsontable`、`@handsontable/react`
gif, jpg, jpeg, bmp, tiff, tif, png, svg	自身
txt, md 等文本格式	自身

前端技术实现文件预览（word、excel、pdf、图片、文本）

Buffer的获取

请求

本地

文件处理

Docx

PDF

Excel

Image

Text

文件

参考链接：