react-pdf实现将pdf文件转为图片,用于页面展示

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

/* 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) => {
      //逐页解析PDF
      var viewport = page.getViewport({ scale: 5 }); // 页面缩放比例，值越大越清晰
      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;

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;

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} // 可以调整缩放比例
          pageNumber={1} // 指定要渲染的页码
          width={600} // 图片宽度
          height={800} // 图片高度
        />
      </PDFViewer>
    </div>
  );
};

export default PdfToImage;

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;