react-pdf預覽線上PDF的使用

web喵神發表於2024-09-14
React

1、在react專案中安裝react-pdf依賴包

建議安裝8.0.2版本的react-pdf，如果安裝更高版本的可能出現一些瀏覽器的相容性問題；

npm install react-pdf@8.0.2 -S

1、PC端的使用

1.1、封裝一個元件：PdfViewModal.tsx

import React, { useState } from 'react'
import { Modal, Spin, Alert } from 'antd'
import { Document, Page, pdfjs } from 'react-pdf'
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
import 'react-pdf/dist/esm/Page/TextLayer.css';

// 配置 PDF.js 的 worker 檔案
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString()

interface PDFPreviewModalProps {
  fileName: string | null
  fileUrl: string | null // 傳入的 PDF 檔案地址
  onCancel: () => void // 關閉彈框的回撥
}

const PDFPreviewModal: React.FC<PDFPreviewModalProps> = ({ fileName, fileUrl, onCancel }) => {
  const [numPages, setNumPages] = useState<number | null>(null)
  const [pdfWidth, setPdfWidth] = useState<number>(600) // 預設寬度為 600px
  const [loading, setLoading] = useState<boolean>(true) // 控制載入狀態
  const [error, setError] = useState<boolean>(false) // 控制載入錯誤狀態
  
  // 當 PDF 載入成功時，設定頁面數量
  const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
    setNumPages(numPages)
    setLoading(false) // 載入成功後，隱藏 loading
  }

  // 載入失敗時，設定錯誤狀態
  const onDocumentLoadError = () => {
    setLoading(false)
    setError(true) // 出錯時顯示錯誤提示
  }

  // 獲取 PDF 頁面載入後的寬度
  const onPageLoadSuccess = ({ width }: { width: number }) => {
    setPdfWidth(width)
  }

  return (
    <Modal
      title={`【${fileName}】預覽`}
      open
      onCancel={onCancel}
      footer={null}
      width={pdfWidth + 100}
      style={{ top: 20 }}
    >
      {error ? (
        <Alert message="載入 PDF 檔案失敗" type="error" showIcon />
      ) : (
        <>
          {loading && (
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '80vh' }}>
              <Spin size="large" />
            </div>
          )}
          {fileUrl && (
            <>
            <div style={{ height: '88vh', overflowY: 'auto', padding: '24px' }}>
              <Document
                //file={new URL('/public/temp/DXF檔案要求.pdf',import.meta.url).toString()}
                file={fileUrl}
                onLoadSuccess={onDocumentLoadSuccess}
                onLoadError={onDocumentLoadError}
              >
                {Array.from(new Array(numPages), (el, index) => (
                  <Page key={`page_${index + 1}`} pageNumber={index + 1} onLoadSuccess={onPageLoadSuccess} />
                ))}
              </Document>
            </div>
            </>
          )}
        </>
      )}
    </Modal>
  )
}

export default PDFPreviewModal

1.2、業務程式碼中引入該元件

import React, { useState, useEffect, useCallback } from 'react'
import { Form } from 'antd'
import { List } from 'antd'
import PDFPreviewModal from '@/components/PdfViewModal.tsx'

const PdfTest = (props: any) => {
  const [previewFile, setPreviewFile] = useState<any>()

 const onTestPdf = () => {
　　setPreviewFile({
　　　　fileName: 'abc.pdf',
　　　　fileUrl: 'http://****/abc.pdf'
　　})
 }return (
    <div className="mrUp mrLink">   
　　　<div onClick={onTestPdf}>測試預覽PDF</div>

      {!!previewFile?.publicFileUrl && (
        <PDFPreviewModal
          fileName={previewFile?.fileName}
          fileUrl={previewFile?.publicFileUrl}
          onCancel={() => setPreviewFile('')}
        />
      )}
    </div>
  )
}

export default PdfTest

2、H5移動端的使用

移動端加入放大、縮小、上一頁、下一頁的功能；

2.1、封裝一個元件：PDFViwer.tsx

import React, { useState } from 'react';
import { Button, Modal, Space, Toast, Divider } from 'antd-mobile'
import { UpOutline, DownOutline, AddCircleOutline, MinusCircleOutline } from 'antd-mobile-icons'
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; // 樣式匯入
import 'react-pdf/dist/esm/Page/TextLayer.css'

// 配置 PDF.js 的 worker 檔案
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString()

interface PDFPreviewModalProps {
  fileUrl: string | null; // 傳入的 PDF 檔案地址
}

const styleBtnDv = {
  display: 'flex',
  justifyContent: 'center',
  height: '1rem',
  alignItems: 'center',
  gap: '0.4rem',
  margin: '0.3rem 1rem',
  padding: '0 0.6rem',
  background: '#444',
  borderRadius: '0.5rem'
}

const styleBtn = {
  flex: 1,
  display: 'flex',
  justifyContent: 'center',
  height: '0.6rem',
  alignItems: 'center',
}

// PDF預覽功能
const PDFViwer: React.FC<PDFPreviewModalProps> = ({ fileUrl }) => {
  const [pageNumber, setPageNumber] = useState(1);
  const [numPages, setNumPages] = useState(1);
  const [scale, setScale] = useState(0.65);

  // 當 PDF 載入成功時，設定頁面數量
  const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
    setNumPages(numPages);
  };

  //上一頁
  function lastPage() {

    if (pageNumber == 1) {
      Toast.show({
        content: '已是第一頁'
      })
      return;
    }
    const page = pageNumber - 1;
    setPageNumber(page);
  }
  //下一頁
  function nextPage() {
    if (pageNumber == numPages) {
      Toast.show("已是最後一頁");
      return;
    }
    const page = pageNumber + 1;
    setPageNumber(page);
  }
  //縮小
  function pageZoomOut() {
    if (scale <= 0.3) {
      Toast.show("已縮放至最小");
      return;
    }
    const newScale = scale - 0.1;
    setScale(newScale);
  }

  //放大
  function pageZoomIn() {
    if (scale >= 5) {
      Toast.show("已放大至最大");
      return;
    }
    const newScale = scale + 0.1;
    setScale(newScale);
  }

  return (
    <div>
      {/* 預覽 PDF 檔案 */}
      {fileUrl ? (
        <div style={{ height: 'calc(100vh - 4.5rem)', overflowY: 'auto', padding: '24px' }}>
          <Document
            // 寫死的pdf檔案地址，用於本地測試使用，打包提交前需要註釋掉
            // file={new URL("/public/temp/AI銷售助手-寬頻&套餐&戰新.pdf", import.meta.url).toString()}
            // 真實傳入的pdf地址
            file={fileUrl}
            onLoadSuccess={onDocumentLoadSuccess}
          >
            <Page pageNumber={pageNumber} scale={scale} />
          </Document>
        </div>
      ) : (
        <p>沒有選擇檔案</p>
      )}
      <div style={styleBtnDv}>
        <div style={styleBtn} onClick={lastPage}><UpOutline color='#fff' fontSize={'0.6rem'} /></div>
        <div style={{ color: '#fff', fontSize: '0.35rem', ...styleBtn }}>{pageNumber}/{numPages}</div>
        <div style={styleBtn} onClick={nextPage}><DownOutline color='#fff' fontSize={'0.6rem'} /></div>
        <div style={styleBtn} onClick={pageZoomIn}><AddCircleOutline color='#fff' fontSize={'0.6rem'} /></div>
        <div style={styleBtn} onClick={pageZoomOut}><MinusCircleOutline color='#fff' fontSize={'0.6rem'} /></div>
      </div>
    </div>
  );
};

export default PDFViwer;

2.2、業務程式碼中引入該元件

import React, { useMemo, useRef, useState } from 'react'
import { ErrorBlock, Swiper, SwiperRef, Popup, } from 'antd-mobile'
import PDFViwer from '@/components/PDFViwer';

const ellipsis1 = {
  "white-space": "nowrap",
  "overflow": "hidden",
  "text-overflow": "ellipsis",
}

const IntroduceDocList = (props: any) => {
  const { loading, introduceDocList } = props
  // const introduceDocList = [
  //   {publicFileUrl: '/public/temp/DXF檔案要求.pdf', fileName:'DXF檔案要求.pdf'},
  //   {publicFileUrl: '/public/temp/AI銷售助手-寬頻&套餐&戰新.pdf', fileName:'AI銷售助手-寬頻&套餐&戰新.pdf'},
  // ]

const [introduceDocList, setIntroduceDocList] = useState({
　　{publicFileUrl: 'http://****/abc.pdf', fileName:'abc.pdf'},
    {publicFileUrl: 'http://****/def.pdf', fileName:'def.pdf'},
 });

  const [pdf, setPdf] = useState({ id: 1 });
  const [showPdfViwer, setShowPdfViwer] = useState(false)

  const onOpenPdfViewer = (item) => {
    console.log(item);
    setPdf(item);
    setShowPdfViwer(true);
  }

  return (
      <div>
        {
          introduceDocList?.map(item => (
            <div data-url={item?.publicFileUrl} style={{ marginBottom: '0.3rem', fontSize: '0.4rem' }}>
              <span style={{color:'#0B75FF'}} onClick={() => onOpenPdfViewer(item)}>{item.fileName}</span>
            </div>
          ))
        }
        <Popup
          position='right'
          visible={showPdfViwer}
          showCloseButton
          bodyStyle={{ width: '100%' }}
          destroyOnClose={true}
          onClose={() => {
            setShowPdfViwer(false)
            setPdf({ id: 1 })
          }}
        >
          <div style={{ padding: '0.3rem 1rem', fontSize: '0.35rem', fontWeight: 600, textAlign:'center', ...ellipsis1 }}>{pdf?.fileName}</div>
          <div style={{ height: '100%' }} data-url={pdf?.publicFileUrl}>
            <PDFViwer fileUrl={pdf?.publicFileUrl} />
          </div>
        </Popup>
      </div>
  )
}
export default IntroduceDocList

效果圖：

注意：擋在本地開發時，如果預覽的pdf檔案地址是線上地址，則會報跨域的問題，需要服務端解決跨域問題。

相關文章