需求修改
parent
69c5a16b59
commit
e45c4d2404
|
|
@ -0,0 +1,193 @@
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import { Modal, Empty, Alert } from "antd";
|
||||||
|
import { renderAsync } from "docx-preview";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
const FILE_TYPE_MAP = {
|
||||||
|
docx: "word",
|
||||||
|
pdf: "pdf",
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 根据 url/类型识别文件类型，仅支持 docx/pdf */
|
||||||
|
function resolveFileType(url, type) {
|
||||||
|
if (type && FILE_TYPE_MAP[type]) return type;
|
||||||
|
const ext = (url || "").split("?")[0].split(".").pop()?.toLowerCase();
|
||||||
|
return FILE_TYPE_MAP[ext] ? ext : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 相对地址拼接文件服务前缀 */
|
||||||
|
function resolveUrl(raw) {
|
||||||
|
if (!raw) return "";
|
||||||
|
const u = String(raw).trim();
|
||||||
|
if (/^https?:\/\//i.test(u)) return u;
|
||||||
|
const base = window.fileUrl || "";
|
||||||
|
return base ? `${base}${u}` : u;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 渲染 Word 文档到容器 */
|
||||||
|
async function renderDocx(url, container) {
|
||||||
|
if (!container) throw new Error("预览容器尚未就绪，请稍后重试");
|
||||||
|
const res = await fetch(url, { credentials: "same-origin" });
|
||||||
|
if (!res.ok) throw new Error(`文档加载失败：${res.status} ${res.statusText}`);
|
||||||
|
const blob = await res.blob();
|
||||||
|
await renderAsync(blob, container, container, {
|
||||||
|
className: "office-preview-docx",
|
||||||
|
inWrapper: true,
|
||||||
|
ignoreWidth: false,
|
||||||
|
ignoreHeight: false,
|
||||||
|
ignoreFonts: false,
|
||||||
|
breakPages: true,
|
||||||
|
renderHeaders: true,
|
||||||
|
renderFooters: true,
|
||||||
|
renderFootnotes: true,
|
||||||
|
renderEndnotes: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 文档预览组件：支持 Word(docx)、PDF，支持弹窗/页面两种模式 */
|
||||||
|
export default function OfficePreview({
|
||||||
|
url,
|
||||||
|
fileType = "auto",
|
||||||
|
mode = "modal",
|
||||||
|
open = false,
|
||||||
|
onCancel,
|
||||||
|
title = "文档预览",
|
||||||
|
width = 1000,
|
||||||
|
className = "",
|
||||||
|
style = {},
|
||||||
|
emptyText = "暂无文档",
|
||||||
|
}) {
|
||||||
|
const containerRef = useRef(null);
|
||||||
|
const aliveRef = useRef(true);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [ready, setReady] = useState(false);
|
||||||
|
const resolvedUrl = resolveUrl(url);
|
||||||
|
const type = resolveFileType(resolvedUrl, fileType);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
aliveRef.current = true;
|
||||||
|
return () => {
|
||||||
|
aliveRef.current = false;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (mode === "modal" && !open) {
|
||||||
|
setReady(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!resolvedUrl || type !== "docx") return;
|
||||||
|
|
||||||
|
setReady(false);
|
||||||
|
setError("");
|
||||||
|
|
||||||
|
let rafId = null;
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
|
const tryRender = () => {
|
||||||
|
if (cancelled) return;
|
||||||
|
const node = containerRef.current;
|
||||||
|
if (!node) {
|
||||||
|
rafId = requestAnimationFrame(tryRender);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setLoading(true);
|
||||||
|
renderDocx(resolvedUrl, node)
|
||||||
|
.then(() => {
|
||||||
|
if (aliveRef.current && !cancelled) {
|
||||||
|
setReady(true);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.error("OfficePreview 文档渲染失败", e);
|
||||||
|
if (aliveRef.current && !cancelled) {
|
||||||
|
setError(e?.message || "文档渲染失败，请稍后重试");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
if (aliveRef.current && !cancelled) {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
tryRender();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
if (rafId !== null) cancelAnimationFrame(rafId);
|
||||||
|
const node = containerRef.current;
|
||||||
|
if (node) node.innerHTML = "";
|
||||||
|
};
|
||||||
|
}, [resolvedUrl, type, open, mode]);
|
||||||
|
|
||||||
|
const renderContent = () => {
|
||||||
|
if (!resolvedUrl) {
|
||||||
|
return <Empty description={emptyText} image={Empty.PRESENTED_IMAGE_SIMPLE} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!type) {
|
||||||
|
return (
|
||||||
|
<Alert
|
||||||
|
type="warning"
|
||||||
|
showIcon
|
||||||
|
message="不支持的文件类型"
|
||||||
|
description="当前仅支持 Word(.docx) 和 PDF(.pdf) 格式预览。"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <Alert type="error" showIcon message={error} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`office-preview-body office-preview-${type}`} style={style}>
|
||||||
|
{type === "docx" && (
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="office-preview-docxContainer"
|
||||||
|
style={{ display: ready ? "block" : "none" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{type === "pdf" && (
|
||||||
|
<iframe
|
||||||
|
className="office-preview-pdfFrame"
|
||||||
|
src={resolvedUrl}
|
||||||
|
title={title}
|
||||||
|
frameBorder="0"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{loading && (
|
||||||
|
<div className="office-preview-loading">
|
||||||
|
<div className="office-preview-loading-text">文档加载中...</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const body = (
|
||||||
|
<div className={`office-preview ${className}`}>{renderContent()}</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (mode === "page") {
|
||||||
|
return body;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
title={title}
|
||||||
|
open={open}
|
||||||
|
onCancel={onCancel}
|
||||||
|
width={width}
|
||||||
|
footer={null}
|
||||||
|
destroyOnHidden
|
||||||
|
centered={false}
|
||||||
|
className="office-preview-modal"
|
||||||
|
>
|
||||||
|
{body}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
.office-preview {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.office-preview-body {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.office-preview-docxContainer {
|
||||||
|
/* 固定占弹窗 90% 视口高度，确保有足够可视区域同时保留滚动条 */
|
||||||
|
height: 90vh;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: auto;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 12px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.office-preview-pdfFrame {
|
||||||
|
height: 90vh;
|
||||||
|
max-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.office-preview-loading {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(255, 255, 255, 0.6);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.office-preview-loading-text {
|
||||||
|
color: #1677ff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.office-preview-modal {
|
||||||
|
/* 弹窗顶部紧贴，让中间文档区域最大化 */
|
||||||
|
.micro-temp-modal {
|
||||||
|
top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.micro-temp-modal-content {
|
||||||
|
/* 弹窗内容占满视口高度，由正文容器再以 90vh 显示 */
|
||||||
|
height: 75vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.micro-temp-modal-header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 8px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.micro-temp-modal-body {
|
||||||
|
flex: 1;
|
||||||
|
/* 覆盖 src/pages/Container/index.less 中全局 .micro-temp-modal-body { max-height: 66vh } 的限制，
|
||||||
|
让文档预览区域能占满更大可视高度 */
|
||||||
|
max-height: none !important;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 4px 8px 8px 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Empty } from "antd";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通用错误边界（React Error Boundary）
|
||||||
|
*
|
||||||
|
* <p>2026-08-18 新增：用于兜底 WpsEditor 等第三方 SDK 在运行时抛出的
|
||||||
|
* "Cannot read properties of undefined (reading 'officeType')" 等未捕获异常。
|
||||||
|
* 第三方 SDK（如 WebOfficeSDK）在内部事件回调中可能因后端数据缺失而抛
|
||||||
|
* TypeError，本组件在 React 渲染树顶层将其捕获，渲染降级 UI，
|
||||||
|
* 避免 React DevTools runtime error overlay 弹出红屏。</p>
|
||||||
|
*/
|
||||||
|
export default class ErrorBoundary extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = { hasError: false };
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromError() {
|
||||||
|
return { hasError: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidCatch(error, info) {
|
||||||
|
// 打印详细错误便于排查，但不让 React DevTools 弹出红屏
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.warn("[ErrorBoundary] 捕获到子组件错误：", error, info);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (this.state.hasError) {
|
||||||
|
if (this.props.fallback) {
|
||||||
|
return this.props.fallback;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
minHeight: 200,
|
||||||
|
padding: 24,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Empty
|
||||||
|
description={this.props.message || "文档加载失败或文件不存在"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return this.props.children;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue