From 544148eddae96db824423cd059ebecb9d13c392e Mon Sep 17 00:00:00 2001
From: xusd <330628789@qq.com>
Date: Thu, 19 Jun 2025 20:52:50 +0800
Subject: [PATCH] fix:市平台项目更新
---
src/components/MyPDF/index.jsx | 159 +++++++++++++++++++++++++++++++----------------------
1 files changed, 93 insertions(+), 66 deletions(-)
diff --git a/src/components/MyPDF/index.jsx b/src/components/MyPDF/index.jsx
index 0c14318..72cf13e 100644
--- a/src/components/MyPDF/index.jsx
+++ b/src/components/MyPDF/index.jsx
@@ -5,17 +5,20 @@
import { CloseCircleFilled, DownloadOutlined } from '@ant-design/icons';
import { IconAttachment } from '@arco-design/web-react/icon';
import { Document, Page, pdfjs } from 'react-pdf';
+import * as docx from 'docx-preview';
import * as $$ from '@/utils/utility';
+import PreviewImage from '@/components/PreviewImage';
import './index.less';
// 设置pdf.js工作器路径
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
const appUrl = $$.appUrl;
-const MyPDF = ({ name, fileUrl }) => {
+const MyPDF = ({ name, fileUrl, fileType }) => {
const [visible, setVisible] = useState(false);
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
+ const containerRef = useRef(null);
// 成功加载PDF文件时的回调
function onDocumentLoadSuccess({ numPages }) {
@@ -36,77 +39,101 @@
}
return (
- <div>
- {fileUrl ? (
- <div
- onClick={() => {
- setVisible(true);
- }}
- className="pdf-title"
- >
- <IconAttachment style={{ color: '#1A6FB8' }} />
- <div className="pdf-name">{name}</div>
- </div>
+ <>
+ {fileType === 'jpg' || fileType === 'png' ? (
+ <PreviewImage name={name} src={fileUrl} />
) : (
- '-'
- )}
-
- <Modal
- style={{ width: '80%' }}
- closable={false}
- title={name}
- footer={
- <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '10px' }}>
- <button
- type="button"
- disabled={pageNumber <= 1}
- onClick={previousPage}
- style={{ padding: '4px 15px', cursor: pageNumber <= 1 ? 'not-allowed' : 'pointer' }}
- >
- 上一页
- </button>
- <p style={{ margin: 0 }}>
- 第 {pageNumber} 页 / 共 {numPages || '--'} 页
- </p>
- <button
- type="button"
- disabled={pageNumber >= numPages}
- onClick={nextPage}
- style={{ padding: '4px 15px', cursor: pageNumber >= numPages ? 'not-allowed' : 'pointer' }}
- >
- 下一页
- </button>
- <Button
- type="primary"
- icon={<DownloadOutlined />}
+ <div>
+ {fileUrl ? (
+ <div
onClick={() => {
- window.open(`${appUrl.fileUrl}${appUrl.fileDownUrl}${fileUrl.split('/').pop()}`);
+ setVisible(true);
+ if (fileType === 'docx' || fileType === 'doc') {
+ const renderDocx = async () => {
+ try {
+ const response = await fetch(`${appUrl.fileUrl}/${appUrl.sys}${fileUrl}`);
+ const blob = await response.blob();
+ await docx.renderAsync(blob, containerRef.current);
+ } catch (error) {
+ console.error('文档加载失败', error);
+ }
+ };
+ renderDocx();
+ }
}}
- style={{ marginLeft: '10px' }}
+ className="pdf-title"
>
- 下载
- </Button>
- </div>
- }
- centered
- unmountOnExit={true}
- visible={visible}
- onCancel={() => {
- setVisible(false);
- }}
- >
- <div style={{ width: '100%', height: 'calc(100vh - 200px)', display: 'flex', justifyContent: 'center', overflow: 'auto' }}>
- <Document
- file={`${appUrl.fileUrl}/${appUrl.sys}${fileUrl}`}
- onLoadSuccess={onDocumentLoadSuccess}
- loading={<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>PDF加载中...</div>}
- error={<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>PDF加载失败，请稍后重试</div>}
+ <IconAttachment style={{ color: '#1A6FB8' }} />
+ <div className="pdf-name">{name}</div>
+ </div>
+ ) : (
+ '-'
+ )}
+
+ <Modal
+ style={{ width: '80%' }}
+ closable={false}
+ title={name}
+ footer={
+ <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '10px' }}>
+ <button
+ type="button"
+ disabled={pageNumber <= 1}
+ onClick={previousPage}
+ style={{ padding: '4px 15px', cursor: pageNumber <= 1 ? 'not-allowed' : 'pointer' }}
+ >
+ 上一页
+ </button>
+ <p style={{ margin: 0 }}>
+ 第 {pageNumber} 页 / 共 {numPages || '--'} 页
+ </p>
+ <button
+ type="button"
+ disabled={pageNumber >= numPages}
+ onClick={nextPage}
+ style={{ padding: '4px 15px', cursor: pageNumber >= numPages ? 'not-allowed' : 'pointer' }}
+ >
+ 下一页
+ </button>
+ <Button
+ type="primary"
+ icon={<DownloadOutlined />}
+ onClick={() => {
+ window.open(`${appUrl.fileUrl}${appUrl.fileDownUrl}${fileUrl.split('/').pop()}`);
+ }}
+ style={{ marginLeft: '10px' }}
+ >
+ 下载
+ </Button>
+ </div>
+ }
+ centered
+ unmountOnExit={true}
+ visible={visible}
+ onCancel={() => {
+ setVisible(false);
+ }}
>
- <Page pageNumber={pageNumber} renderTextLayer={false} renderAnnotationLayer={false} scale={1.2} />
- </Document>
+ <div style={{ width: '100%', height: 'calc(100vh - 200px)', display: 'flex', justifyContent: 'center', overflow: 'auto' }}>
+ {fileType === 'pdf' && (
+ <Document
+ file={`${appUrl.fileUrl}/${appUrl.sys}${fileUrl}`}
+ onLoadSuccess={onDocumentLoadSuccess}
+ loading={<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>PDF加载中...</div>}
+ error={
+ <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>PDF加载失败，请稍后重试</div>
+ }
+ >
+ <Page pageNumber={pageNumber} renderTextLayer={false} renderAnnotationLayer={false} scale={1.2} />
+ </Document>
+ )}
+ {fileType === 'docx' && <div ref={containerRef} className="docx-container" />}
+ {fileType === 'doc' && <div ref={containerRef} className="docx-container" />}
+ </div>
+ </Modal>
</div>
- </Modal>
- </div>
+ )}
+ </>
);
};
--
Gitblit v1.8.0