gx

package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@ant-design/cssinjs": "^1.5.6",
+    "@react-pdf-viewer/core": "3.12.0",
+    "@react-pdf-viewer/default-layout": "3.12.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -16,6 +18,7 @@
     "axios": "^1.13.2",
     "classnames": "^2.5.1",
     "crypto-js": "^4.2.0",
+    "pdfjs-dist": "3.11.174",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.4",
@@ -62,4 +65,4 @@
     "react-app-rewired": "^2.2.1"
   },
   "homepage": "."
-}
+}

src/components/PdfViewer/index.tsx

@@ -1,15 +1,25 @@
-import React from 'react'
+import React from 'react';
+// 引入核心样式
+import '@react-pdf-viewer/core/lib/styles/index.css';
+// 引入默认布局样式
+import '@react-pdf-viewer/default-layout/lib/styles/index.css';
+// 引入核心组件
+import { Viewer } from '@react-pdf-viewer/core';
+import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
 
-import PDFViewer from 'pdf-viewer-reactjs'
+// 初始化默认布局插件
+const defaultLayoutPluginInstance = defaultLayoutPlugin();
 
 const PdfViewer = () => {
+
   return (
-    <PDFViewer
-      document={{
-        url: 'myData/pdfs/pdfTEST.pdf',
-      }}
-    />
-  )
-}
-
-export default PdfViewer
+    <div style={{ height: '750px' }}>
+      <Viewer
+        fileUrl={'myData/pdfs/pdfTEST.pdf'}
+        plugins={[defaultLayoutPluginInstance]}
+      />
+    </div>
+  );
+};
+
+export default PdfViewer;

src/pages/A7wjwj/conponents/Discover/index.tsx

@@ -131,8 +131,6 @@ function Discover(props: { style?: React.CSSProperties }) {
       <div className='direct' onClick={() => setIsShowPdf(true)}>
         <img src={require('@/assets/img/A7_direct.png')} alt='' draggable={false} />
       </div>
-      {isShowPdf && <div style={{ width: '100%', height: '100%', position: 'fixed', top: 0, left: 0, zIndex: 1000 }}> <PdfViewer />
-      </div>}
     </div>
   )
 }

src/utils/util.ts

@@ -1,8 +0,0 @@
-const exChangeHW = (id: string) => {
-  const element = document.getElementById(id)
-  if (!element) return
-  const { width, height } = element.getBoundingClientRect()
-  element.style.transform = `translate(${-width / 2}px, ${-height / 2}px)`
-}
-
-export default exChangeHW