使用的是react Hook写法,文件是直接引入的pdf文件,也可以识别base64数据格式
安装依赖:cnpm install react-pdf-js
效果如下 :
import React, { memo, useCallback, useState } from "react";
//react预览pdf文件插件
import PDF from "react-pdf-js";
import pdfs from "/bestFirends.pdf"; // 这里直接引入的pdf文件
import "./index.less";
export default memo(() => {
const [pages, setPages] = useState({ page: 1, allPages: 1 });
const getAllPages = useCallback(
(pageNums) => {
setPages((prev) => ({ ...prev, allPages: pageNums }));
},
[pages]
);
const nextPage = useCallback(
(type) => {
let currentPage = pages["page"];
if (type == "next") {
// 如果是下一页
if (currentPage == pages["allPages"]) {
alert("已经是最后一页了");
} else {
setPages((prev) => ({ ...prev, page: currentPage + 1 }));
}
} else {
// 如果是上一页
if (currentPage == 1) {
alert("已经是第一页了");
} else {
setPages((prev) => ({ ...prev, page: currentPage - 1 }));
}
}
},
[pages]
);
return (
<div>
<p>
<button onClick={() => nextPage("up")}>上一页</button>
<span>
{pages["page"]}/{pages["allPages"]}页
</span>
<button onClick={() => nextPage("next")}>下一页</button>
</p>
<PDF
file={pdfs} //文件地址
onDocumentComplete={getAllPages}
page={pages["page"]} //文件页码
/>
</div>
);
});
扩展:
提示:展示全部页面和调接口处理为base64:
const [blob, setBlob] = useState(null);
const [pdfblob, setPdfBlob] = useState(null);
useEffect(() => { //重点在此!!!!!如何将PDF文件流转base64
fetchData({
url:'填接口地址噢',
method: 'get',
responseType: 'blob', //必写!
params:{
number: number, // 接口传参
}
}).then((res)=>{
setBlob(res.data)
let reader = new FileReader();
reader.readAsDataURL(res.data); // 转换为base64,可以直接放入a标签href
reader.addEventListener("load", function () {
let base64 = reader.result as string
setPdfBlob(base64.split(',')[1])
});
})
}, []);
//史诗级重点!不进行异常处理会报错!全网找不到的!
let newpdfblob = "data:application/pdf;base64,"+pdfblob
if(!pdfblob) return null
全部展示
function directlyRenderPdf(nums: number){
const x = [];
for (let i = 2; i <= totalPage; i++)
x.push(<PDF page={i} key={`x${i}`} file={newpdfblob} scale={0.61}/>);
return x;
}
更多推荐
react中实现预览pdf功能(react-pdf-js)
发布评论