react实现word预览
React 实现 Word 预览
在 React 中实现 Word 文档预览可以通过多种方式完成，以下是几种常见的方法：
使用第三方库 mammoth.js
mammoth.js 是一个用于将 .docx 文件转换为 HTML 的库，适合在浏览器端直接处理 Word 文档。
安装依赖：
npm install mammoth示例代码：
import React, { useState } from 'react';
import * as mammoth from 'mammoth';
function WordPreview() {
const [html, setHtml] = useState('');
const handleFileChange = async (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = async (event) => {
const arrayBuffer = event.target.result;
const result = await mammoth.extractRawText({ arrayBuffer });
setHtml(result.value);
};
reader.readAsArrayBuffer(file);
};
return (
<div>
<input type="file" onChange={handleFileChange} accept=".docx" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
);
}
export default WordPreview;使用 Office.js 官方库
Office.js 是微软官方提供的库，适合在 Office 插件或网页中嵌入 Word 预览功能。
安装依赖：
npm install @microsoft/office-js示例代码：
import React, { useEffect } from 'react';
import * as Office from '@microsoft/office-js';
function WordPreview() {
useEffect(() => {
Office.onReady(() => {
console.log('Office.js is ready');
});
}, []);
return (
<div>
<button onClick={() => Office.context.document.getFileAsync()}>
Preview Word
</button>
</div>
);
}
export default WordPreview;使用 Google Docs Viewer
通过嵌入 Google Docs Viewer 的 iframe 实现预览，适合快速实现但不支持编辑。
示例代码：
import React from 'react';
function WordPreview() {
const docUrl = 'https://docs.google.com/viewer?url=YOUR_DOC_URL&embedded=true';
return (
<div>
<iframe
src={docUrl}
width="100%"
height="500px"
frameBorder="0"
/>
</div>
);
}
export default WordPreview;使用后端服务转换
如果文档需要更复杂的处理，可以通过后端服务将 Word 转换为 PDF 或 HTML，再在 React 中显示。
示例代码（假设后端返回 HTML）：
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function WordPreview() {
const [html, setHtml] = useState('');
useEffect(() => {
axios.get('/api/convert-word-to-html')
.then(response => setHtml(response.data));
}, []);
return (
<div dangerouslySetInnerHTML={{ __html: html }} />
);
}
export default WordPreview;注意事项
- 文件安全性：直接使用
dangerouslySetInnerHTML需确保内容来源可信，避免 XSS 攻击。 - 性能优化：大文件处理时建议分片或使用后端服务。
- 格式兼容性：某些复杂格式可能无法完全保留，需测试目标文档的渲染效果。
以上方法可根据实际需求选择，mammoth.js 适合纯前端解决方案，Office.js 适合深度集成，Google Docs Viewer 适合快速嵌入。
