新增看pdf图片的页面4

src/App.tsx

@@ -27,9 +27,6 @@ export function App() {
         <Route path="/pdfImages">
           <PdfImages />
         </Route>
-        <Route path="/pdf">
-          <Pdf />
-        </Route>
         <Route path="/videoList/:subject">
           <VideoList />
         </Route>

src/views/pdf/index.less

@@ -1,3 +0,0 @@
-.pdf-canvas {
-    width: 100%;
-  }

src/views/pdf/index.tsx

@@ -1,75 +0,0 @@
-import './index.less'
-import React, { useEffect, useState } from "react";
-import * as PDFJS from 'pdfjs-dist/legacy/build/pdf'; // 引入PDFJS
-import pdfjsWorker from 'pdfjs-dist/legacy/build/pdf.worker.entry.js'; // 引入workerSrc的地址
-import 'pdfjs-dist/web/pdf_viewer.css';
-import { PDFDocumentProxy } from 'pdfjs-dist/types/web/pdf_find_controller';
-PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址
-import { Toast } from 'antd-mobile'
-document.title = '预览pdf';
-export const Pdf: React.FC = (props: any) => {
-    let [pdfPagesNum, setPdfPagesNum] = useState(1)
-
-    const getPdf = (url: string) => {
-        let that = this;
-       let loadToast= Toast.show({
-            content: "正在加载中",
-            icon: "loading"
-        });
-        (document.getElementById('pdf-canvas') as HTMLDivElement).innerHTML = '';
-        PDFJS.getDocument({url:url
-       }).promise.then((pdfDoc) => {
-            pdfPagesNum = pdfDoc.numPages; // pdf的总页数
-            //console.log(pdfPagesNum)
-            //获取第pageNum页的数据
-            for (let index = 1; index <= pdfDoc.numPages; index++) {
-                showPdfs(pdfDoc, index);
-                console.log(index)
-            }
-            loadToast.close()
-        });
-        
-    }
-    const showPdfs = (pdfDoc: PDFDocumentProxy, pageNum: number) => {
-        pdfDoc.getPage(pageNum).then((page) => {
-            // 设置canvas相关的属性
-            // console.log(canvasDomArr.value)
-            const canvas: HTMLCanvasElement = document.createElement('canvas');
-            canvas.classList.add('pdf-canvas');
-            const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-            const dpr = window.devicePixelRatio || 1;
-            const bsr =
-                ctx?.webkitBackingStorePixelRatio ||
-                ctx?.mozBackingStorePixelRatio ||
-                ctx?.msBackingStorePixelRatio ||
-                ctx?.oBackingStorePixelRatio ||
-                ctx?.backingStorePixelRatio ||
-                1;
-            const ratio = dpr / bsr;
-            const viewport = page.getViewport({ scale: 1 });
-            canvas.width = viewport.width * ratio;
-            canvas.height = viewport.height * ratio;
-            // canvas.style.width = viewport.width + "px";
-            // canvas.style.height = viewport.height + "px";
-            ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
-            const context = {
-                canvasContext: ctx,
-                viewport: viewport,
-            };
-            // 数据渲染到canvas画布上
-            page.render(context);
-            //插入canvas
-            document.getElementById('pdf-canvas')?.appendChild(canvas);
-        });
-    }
-    useEffect(() => {
-        getPdf('./ctjk_library.pdf')
-
-    })
-    return (
-        <div>
-            <div id="pdf-canvas"></div>
-        </div>
-    )
-
-}