fix:市平台项目更新

xusd

7 days ago 544148eddae96db824423cd059ebecb9d13c392e

 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,11 +39,27 @@
   }

   return (
      <>
         {fileType === 'jpg' || fileType === 'png' ? (
            <PreviewImage name={name} src={fileUrl} />
         ) : (
      <div>
         {fileUrl ? (
            <div
               onClick={() => {
                  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();
                        }
               }}
               className="pdf-title"
            >
@@ -96,17 +115,25 @@
            }}
         >
            <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>}
                           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>
         )}
      </>
   );
};