React渲染pdf
yarn add pdfjs-dist
安装pdfjs-dist,我这里使用的是 2.0.943版本的
文件中导入
import pdfjsLib from 'pdfjs-dist';
定义一个存储pdf内容和总页数的state,因为渲染pdf的时候需要创建canvas标签,标签需要给对应容器添加进去
const [total, setTotal] = useState<any[]>([]); // pdf分页
const [pdfState, setPdfState] = useState<any>({}); // 解析之后pdf
加载解析pdf文件
const loadingTask = pdfjsLib.getDocument(docsPdf);
// 解析pdf
loadingTask.promise.then((pdf) => {
// 生成对应length的数组
setTotal(Array.from({ length: pdf.numPages }, () => ({})));
setPdfState(pdf);
});
useEffect监听pdfState的修改,如果不去监听的话,total和pdf同时拿到此时数据同步去处理对应的div和canvas是没有渲染的
// pdf解析完成之后去渲染生成canvas
// 因为渲染canvas外层元素的数据和修改pdf是同时拿到的,如果直接在上一个useEffe