Commit 2c69520a by weiw

fix:修改docx文件预览

parent 31710951
/* src/components/FilePreviewModal/DocxPreview.css */
.docx-document {
width: 100% !important;
padding: 20px 20px !important;
margin-bottom: 0px !important;
height: 100% !important;
box-shadow: none !important;
}
.docx-document-wrapper {
padding: 0 !important;
}
\ No newline at end of file
// src/components/FilePreviewModal/DocxPreview.tsx
import React, { useEffect, useRef } from 'react'
import { renderAsync } from 'docx-preview'
import './DocxPreview.css' // 导入样式文件
interface DocxPreviewProps {
src: string
......@@ -27,12 +28,16 @@ export const DocxPreview: React.FC<DocxPreviewProps> = ({ src, className = '', o
}
return renderAsync(blob, containerRef.current!, undefined, {
className,
className: 'docx-document', // 使用特定类名避免样式冲突
inWrapper: true,
breakPages: true,
ignoreWidth: false,
ignoreHeight: false,
ignoreFonts: false,
// 添加更多配置以改善渲染效果
renderHeaders: true,
renderFooters: true,
renderFootnotes: true,
})
})
.then(() => {
......@@ -56,6 +61,10 @@ export const DocxPreview: React.FC<DocxPreviewProps> = ({ src, className = '', o
backgroundColor: '#fff',
maxWidth: '100%',
boxSizing: 'border-box',
// 添加以下样式以改善显示效果
lineHeight: '1.6',
wordWrap: 'break-word',
wordBreak: 'break-word',
}}
/>
)
......
......@@ -89,7 +89,7 @@ export const FilePreviewModal: React.FC<FilePreviewModalProps> = ({ isOpen, onCl
<DocxPreview
key={docUrl} // 添加key确保组件重新挂载
src={docUrl}
className="w-full"
className="w-full min-h-full"
onRendered={handleDocumentRendered}
onError={handleDocumentError}
/>
......@@ -184,7 +184,7 @@ export const FilePreviewModal: React.FC<FilePreviewModalProps> = ({ isOpen, onCl
onClose={handleClose} // 使用改进的关闭函数
size="3xl"
classNames={{
base: 'max-h-[90vh] max-w-[50vw]',
base: 'max-h-[90vh] max-w-[80vw]',
body: 'py-4',
header: 'border-b border-divider',
footer: 'border-t border-divider',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment