首页 > 网络编程 > JavaScript > javascript类库 > React > react-pdf将pdf文件转为图片,用于页面展示

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

2024-07-02 09:40:11 作者：可缺不可滥

这篇文章主要介绍了react-pdf实现将pdf文件转为图片,用于页面展示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

概述

React-PDF是一个用于在React应用程序中显示PDF文档的库。它提供了一组React组件，可以轻松地将PDF文档嵌入到应用程序中，并且支持多种PDF文档的格式。

使用React-PDF，你可以在React应用程序中显示PDF文档，并且可以控制文档的缩放、页面旋转、书签导航、文本搜索等功能。React-PDF还提供了一些高级功能，例如实时注释、跨文档搜索等。

React-PDF的安装非常简单，在你的React项目中安装react-pdf包并在代码中导入所需的组件即可。

要在 React 中使用 react-pdf 将 PDF 文件转换为图片并用于页面展示，你可以遵循以下步骤：

1.安装 react-pdf

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

2.转换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) => {
      //逐页解析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.组件用法展示

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 组件中，你可以导入 react-pdf 包，并使用 PDFViewer 和 PDFPage 组件来加载 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} // 可以调整缩放比例
          pageNumber={1} // 指定要渲染的页码
          width={600} // 图片宽度
          height={800} // 图片高度
        />
      </PDFViewer>
    </div>
  );
};

export default PdfToImage;

在上述代码中，我们导入了 PDFViewer 和 PDFPage 组件，然后在组件中定义了一个 PDF 视图，使用 file 属性指定要加载的 PDF 文件。

你可以调整 scale、pageNumber、width 和 height 等属性来自定义 PDF 图像的呈现方式。

举例说明：

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;

在这个例子中，我们导入了React-PDF提供的Document和Page组件，并使用它们来在应用程序中显示PDF文档。

在onDocumentLoadSuccess回调函数中，我们获取PDF文档的总页数，并将其保存到状态变量中。

最后，我们还显示了当前页和总页数。

5.react-pdf详解

前往 https://www.npmjs.com/package/react-pdf

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。