快捷導(dǎo)航

關(guān)于React項目中的PDF展示解決方案

更新時間：2024年07月02日 09:52:16 作者：草晚晴

這篇文章主要介紹了關(guān)于React項目中的PDF展示解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

使用iframe標簽

1.不需要任何依賴的兩種方式為

直接使用iframe標簽展示pdf文件

<iframe src={fileUrl} width={'100%'} height={'100%'} style={{ minHeight: '80vh' }} />

其中fileUrl為需要展示pdf的文件地址，寬高和style均可自定義，下不贅述。

如果用戶可以訪問google，則可以使用如下地址：

<iframe
        src={`http://docs.google.com/gview?url=${fileUrl}&embedded=true`}
        width={'100%'}
        height={'100%'}
        style={{ minHeight: '80vh' }}
      />

其中fileUrl為需要展示pdf的文件地址，寬高和style均可自定義。

2.使用編譯好的靜態(tài)庫pdf.js的viewer.html展示

編譯好的pdfjs可直接下載，也可去官網(wǎng)下載
需要先將編譯好的pdfjs版本放在react項目的public目錄下

├── config                   # umi 配置，包含路由，構(gòu)建等配置
├── mock                     # 本地模擬數(shù)據(jù)
├── public                    # 將編譯好的PDFJS放在這個目錄下 
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地靜態(tài)資源
│   ├── components           # 業(yè)務(wù)通用組件
│   ├── e2e                  # 集成測試用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 業(yè)務(wù)頁面入口和常用模板
│   ├── services             # 后臺接口服務(wù)
│   ├── utils                # 工具庫
│   ├── locales              # 國際化資源
│   ├── global.less          # 全局樣式
│   └── global.ts            # 全局 JS
├── tests                    # 測試工具
├── README.md
└── package.json

如下圖所示：

在這里插入圖片描述

在需要展示PDF文件的地方，使用如下src即可。

<iframe
            src={`pdfjs-2.2.228-dist/web/viewer.html?file=${fileUrl}`}
            width={'100%'}
            height={'100%'}
            style={{ minHeight: '80vh' }}
          />

使用react-pdf展示

import { Pagination } from 'antd';
import React, { useState } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
// @ts-ignore

const PdfViewer: React.FC<{ url: string }> = ({ url }) => {
  const [numPages, setNumPages] = useState(0);
  const [pageNumber, setPageNumber] = useState(1);

  // @ts-ignore
  const onDocumentLoadSuccess = (props: any) => {
    setNumPages(props?.numPages);
  };

  const onChangePage = (page: any) => {
    setPageNumber(page);
  };

  return (
    <div>
      <div style={{ marginBottom: 4 }}>
        <a href={url} target={'_blank'} rel="noreferrer">
          查看當(dāng)前文件
        </a>
      </div>

      <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <Pagination
        style={{ marginTop: 4, display: 'flex', justifyContent: 'flex-end' }}
        total={numPages}
        simple
        hideOnSinglePage
        showTotal={(total) => `共 ${total} 頁`}
        current={pageNumber}
        pageSize={1}
        size="small"
        onChange={onChangePage}
      />
    </div>
  );
};

export default PdfViewer;

pdfjs的另一種使用方式

import { useEffect, useRef, useState } from 'react';

const PDFJsViewer = ({ pdfUrl }: any) => {
  const pdfjsLib = require('pdfjs-dist/build/pdf.js');
  const pdfjsWorker = require('pdfjs-dist/build/pdf.worker.entry.js');

  pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

  const canvasRef = useRef(null);
  const [scale, setScale] = useState(1);
  const [offset, setOffset] = useState({ x: 0, y: 0 });

  const handleWheel = (e: any) => {
    if (e.deltaY < 0) {
      setScale((prevScale) => Math.min(prevScale + 0.1, 3));
    } else {
      setScale((prevScale) => Math.max(prevScale - 0.1, 0.5));
    }
  };

  const handleMouseDown = (e: any) => {
    const initialX = e.clientX - offset.x;
    const initialY = e.clientY - offset.y;

    const handleMouseMove = (e: any) => {
      const newX = e.clientX - initialX;
      const newY = e.clientY - initialY;

      setOffset({ x: newX, y: newY });
    };

    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  useEffect(() => {
    const canvas = canvasRef.current;
    //@ts-ignore
    const ctx = canvas.getContext('2d');

    const loadingTask = pdfjsLib.getDocument(pdfUrl);

    loadingTask.promise.then((pdf: any) => {
      pdf.getPage(1).then((page: any) => {
        const viewport = page.getViewport({ scale: scale });
        //@ts-ignore
        canvas.height = viewport.height;
        //@ts-ignore
        canvas.width = viewport.width;

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        //@ts-ignore
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.setTransform(scale, 0, 0, scale, offset.x, offset.y);

        const renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };

        page.render(renderContext);
      });
    });
  }, [pdfUrl, scale, offset]);

  return <canvas ref={canvasRef} onWheel={handleWheel} onMouseDown={handleMouseDown}></canvas>;
};

export default PDFJsViewer;