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,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>
         )}
      </>
   );
};