快捷導(dǎo)航

react-pdf實(shí)現(xiàn)將pdf文件轉(zhuǎn)為圖片,用于頁(yè)面展示

更新時(shí)間：2024年07月02日 09:41:08 作者：可缺不可濫

這篇文章主要介紹了react-pdf實(shí)現(xiàn)將pdf文件轉(zhuǎn)為圖片,用于頁(yè)面展示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

概述

React-PDF是一個(gè)用于在React應(yīng)用程序中顯示PDF文檔的庫(kù)。它提供了一組React組件，可以輕松地將PDF文檔嵌入到應(yīng)用程序中，并且支持多種PDF文檔的格式。

使用React-PDF，你可以在React應(yīng)用程序中顯示PDF文檔，并且可以控制文檔的縮放、頁(yè)面旋轉(zhuǎn)、書簽導(dǎo)航、文本搜索等功能。React-PDF還提供了一些高級(jí)功能，例如實(shí)時(shí)注釋、跨文檔搜索等。

React-PDF的安裝非常簡(jiǎn)單，在你的React項(xiàng)目中安裝react-pdf包并在代碼中導(dǎo)入所需的組件即可。

要在 React 中使用 react-pdf 將 PDF 文件轉(zhuǎn)換為圖片并用于頁(yè)面展示，你可以遵循以下步驟：

1.安裝 react-pdf

yarn add react-pdf
yarn add @react-pdf/renderer
或
npm install react-pdf --save
npm install @react-pdf/renderer

2.轉(zhuǎn)換pdf為圖片的組件

/* eslint-disable */
import { useState, useEffect, useRef } from "react";
var pdfjsLib = require("pdfjs-dist/es5/build/pdf.js");
import "pdfjs-dist/es5/build/pdf.worker.entry";


const PdfViewer = ({ url }) => {
  const [pageNumbers, setPageNumbers] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [rendering, setRendering] = useState(false);
  const pdfRef = useRef(null);
  function renderPdf(pdfFile) {
    let canvas = document.getElementById("pdf");
    let canvasContext = canvas.getContext("2d");
    pdfFile.getPage(currentPage).then((page) => {
      //逐頁(yè)解析PDF
      var viewport = page.getViewport({ scale: 5 }); // 頁(yè)面縮放比例，值越大越清晰
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      canvasContext.clearRect(0, 0, canvas.width, canvas.height);
      var renderContext = {
        canvasContext: canvasContext,
        viewport: viewport,
        rotate: 90,
      };
      setRendering(true);
      page.render(renderContext).promise.finally(() => {
        setRendering(false);
      }); //渲染生成
    });
  }

  useEffect(() => {
    let loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise
      .then((pdf) => {
        // console.log(pdf.numPages);
        pdfRef.current = pdf;
        setPageNumbers(pdf.numPages);
        renderPdf(pdf);
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  useEffect(() => {
    if (pdfRef.current) {
      window.scrollTo({ top: 0 });
      renderPdf(pdfRef.current);
    }
  }, [currentPage]);

  return (
    <div>
      <canvas id="pdf" style={{ width: "100%" }} />
    </div>
  );
};

export default PdfViewer;

3.組件用法展示

import React from "react";
import PdfView from "../components/pdf-view";

import TestPdf from "../accessts/test.pdf";

function Home(props) {
  return (
    <div>
      <PdfView url={TestPdf} />
    </div>
  );
}

export default Home;

4.直接使用react-pdf的組件

在你的 React 組件中，你可以導(dǎo)入 react-pdf 包，并使用 PDFViewer 和 PDFPage 組件來(lái)加載 PDF 文件并將其渲染為圖片。

import React from 'react';
import { PDFViewer, PDFPage } from '@react-pdf/renderer';

const PdfToImage = () => {
  const pdfFileUrl = 'path_to_your_pdf.pdf'; // 替換為你的 PDF 文件的路徑或 URL

  return (
    <div>
      <h1>PDF to Image Example</h1>
      <PDFViewer width={600} height={800}> {/* 定義 PDF 視圖 */}
        <PDFPage
          file={pdfFileUrl}
          scale={1.0} // 可以調(diào)整縮放比例
          pageNumber={1} // 指定要渲染的頁(yè)碼
          width={600} // 圖片寬度
          height={800} // 圖片高度
        />
      </PDFViewer>
    </div>
  );
};

export default PdfToImage;

在上述代碼中，我們導(dǎo)入了 PDFViewer 和 PDFPage 組件，然后在組件中定義了一個(gè) PDF 視圖，使用 file 屬性指定要加載的 PDF 文件。

你可以調(diào)整 scale、pageNumber、width 和 height 等屬性來(lái)自定義 PDF 圖像的呈現(xiàn)方式。

舉例說(shuō)明：

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

function PDFViewer() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document file="/sample.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}

export default PDFViewer;

在這個(gè)例子中，我們導(dǎo)入了React-PDF提供的Document和Page組件，并使用它們來(lái)在應(yīng)用程序中顯示PDF文檔。

在onDocumentLoadSuccess回調(diào)函數(shù)中，我們獲取PDF文檔的總頁(yè)數(shù)，并將其保存到狀態(tài)變量中。

最后，我們還顯示了當(dāng)前頁(yè)和總頁(yè)數(shù)。