react-pdf converts pdf files into pictures for page display

1. Install react-pdf

yarn add react-pdf
或
npm install react-pdf --save

2. Component that converts pdf to picture

/* 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;

3. Component usage display

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. Use the components of react-pdf directly

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

function Login() {
    
    
  return (
    <div>
      这是登录用的页面
      <Document file="test.pdf" >
        <Page pageNumber={
    
    1} />
      </Document>
    </div>
  );
}

export default Login;

5.react-pdf detailed explanation

Go to https://www.npmjs.com/package/react-pdf