概述
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文档的总页数,并将其保存到状态变量中。最后,我们还显示了当前页和总页数。