Skip to content

S
sdream-ai-fe
Commit 7519c700 by weiw
Options

fix：处理预览excel文件的样式问题

parent 3102a879
Showing with 35 additions and 26 deletions
src/components/FilePreviewModal/ExcelPreview.tsx
...@@ -42,11 +42,17 @@ export const ExcelPreview: React.FC<ExcelPreviewProps> = ({ ...@@ -42,11 +42,17 @@ export const ExcelPreview: React.FC<ExcelPreviewProps> = ({
editable: false, editable: false,
}) })
// 添加基本样式使表格更美观并避免横向滚动 // 添加基本样式使表格更美观并支持横向滚动
const styledHtml = htmlString const styledHtml = htmlString
.replace('<table', '<table style="width: 100%; table-layout: fixed; border-collapse: collapse;"') .replace('<table', '<table style="width: auto; min-width: 100%; border-collapse: collapse;"')
.replace(/<td/g, '<td style="border: 1px solid #d1d5db; padding: 4px 8px; word-wrap: break-word; overflow-wrap: break-word;"') .replace(
.replace(/<th/g, '<th style="border: 1px solid #d1d5db; padding: 4px 8px; background-color: #f3f4f6; font-weight: bold; word-wrap: break-word; overflow-wrap: break-word;"') /<td/g,
'<td style="border: 1px solid #d1d5db; padding: 4px 8px; word-wrap: break-word; overflow-wrap: break-word; white-space: nowrap;"',
)
.replace(
/<th/g,
'<th style="border: 1px solid #d1d5db; padding: 4px 8px; background-color: #f3f4f6; font-weight: bold; word-wrap: break-word; overflow-wrap: break-word; white-space: nowrap;"',
)
setHtml(styledHtml) setHtml(styledHtml)
onRendered?.() onRendered?.()
...@@ -62,11 +68,10 @@ export const ExcelPreview: React.FC<ExcelPreviewProps> = ({ ...@@ -62,11 +68,10 @@ export const ExcelPreview: React.FC<ExcelPreviewProps> = ({
}, [src, options, onRendered, onError]) }, [src, options, onRendered, onError])
return ( return (
<div className={`${className} overflow-auto p-4 bg-white`}> <div className={`${className} flex flex-col h-full`}>
<div <div className="overflow-auto flex-grow p-4 bg-white">
dangerouslySetInnerHTML={{ __html: html || '<p>无法加载 Excel 内容</p>' }} <div dangerouslySetInnerHTML={{ __html: html || '<p>无法加载 Excel 内容</p>' }} style={{ minWidth: '100%' }} />
style={{ minWidth: '100%' }} </div>
/>
</div> </div>
) )
} }
src/components/FilePreviewModal/index.tsx
...@@ -115,28 +115,32 @@ export const FilePreviewModal: React.FC<FilePreviewModalProps> = ({ isOpen, onCl ...@@ -115,28 +115,32 @@ export const FilePreviewModal: React.FC<FilePreviewModalProps> = ({ isOpen, onCl
case 'xls': case 'xls':
return ( return (
<div className="h-[70vh] max-h-[70vh] overflow-auto"> <div className="h-[70vh] max-h-[70vh] flex flex-col">
<ExcelPreview <div className="flex-grow overflow-hidden">
key={docUrl} // 添加key确保组件重新挂载 <ExcelPreview
src={docUrl} key={docUrl} // 添加key确保组件重新挂载
options={{ xls: true }} src={docUrl}
className="w-full min-h-full" options={{ xls: true }}
onRendered={handleDocumentRendered} className="h-full"
onError={handleDocumentError} onRendered={handleDocumentRendered}
/> onError={handleDocumentError}
/>
</div>
</div> </div>
) )
case 'xlsx': case 'xlsx':
return ( return (
<div className="h-[70vh] max-h-[70vh] overflow-auto"> <div className="h-[70vh] max-h-[70vh] flex flex-col">
<ExcelPreview <div className="flex-grow overflow-hidden">
key={docUrl} // 添加key确保组件重新挂载 <ExcelPreview
src={docUrl} key={docUrl} // 添加key确保组件重新挂载
className="w-full min-h-full" src={docUrl}
onRendered={handleDocumentRendered} className="h-full"
onError={handleDocumentError} onRendered={handleDocumentRendered}
/> onError={handleDocumentError}
/>
</div>
</div> </div>
) )
......
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