1.安装 react-pdf
yarn add react-pdf
或
npm install react-pdf --save
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的组件
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详解
前往 https://www.npmjs.com/package/react-pdf