react-pdf 实战实例

主要技术 react-pdf， react（lazy Suspense） react-dom节点的插入, 原生Dom节点的插入与删除 

 

1.  移动端 使用PdfReader:PDF预览组件替换掉embed标签 并替换掉 指定 dom节点
2.  web端使用 embed标签 直接渲染 PDF文件
3. 使用web-worker把pdf转换为svg图片(web-worker js文件必须放在网络中不能使用本地资源)

import React, {lazy, Suspense} from "react";
import ReactDOM from "react-dom";
function isMobile(){
	let info = navigator.userAgent;
	let agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod", "iPad"];
	for(let i = 0; i < agents.length; i++){
		if(info.indexOf(agents[i]) >= 0) return true;
	}
	return false;
}
export default function insertPdfjs(){
	if(!isMobile()){
		return true;
	}
 setTimeout(() => {
		let Doms = document.getElementsByTagName('embed');
		if (Doms && Doms.length) {
			const PdfReader = lazy(() => import ('./index'));
			for (let item of Doms) {
				if (item.className === 'ql-pdf' && item.src) {  // 存在pdf文件 获取元素和 url 并渲染组件
					console.log(item.src);
					let divNew = document.createElement('div');
					item.parentNode.appendChild(divNew);
					ReactDOM.render(<Suspense fallback={<div>加载中</div>}>
							<PdfReader src={item.src}/>
						</Suspense>
						, divNew);
					item.parentNode.removeChild(item);
				}
			}
		}
	}, 4000);
}

1. import React from 'react';
   import {useState} from 'react';
   import {Document, Page, pdfjs} from 'react-pdf'; // 依赖 版本 react-pdf 5.0及以上 并且依赖pdf js
   import styles from './style.less';
   
   pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
   
   interface prop {
   	src: string | null,
   }
   
   export default function Index({src}: prop) {
   	const [numPages, setNumPages] = useState(0);
   	const [pageNumber, setPageNumber] = useState(1);
   
   	function onDocumentLoadSuccess({numPages}) {
   		setNumPages(numPages);
   	}
   
   	return (<div className={styles.divOutSide}>
   		<Document file={src}
   							onLoadSuccess={onDocumentLoadSuccess}
   							onLoadError={(error) => alert('加载pdf文件失败' + error.message)}
   							renderMode={'svg'}
   		>
   			<Page pageNumber={pageNumber}
   						// width={523}
   			/>
   		</Document>
   		<div className={styles.pageS}>
   			{
   				pageNumber > 1 && <a onClick={() => {
   					setPageNumber(old => old - 1)
   				}}>
   					上一页
   				</a>
   			}
   			{
   				pageNumber < numPages && <a onClick={() => {
   					setPageNumber((old) => old + 1
   					)
   				}}>
   					下一页
   				</a>
   			}
   		</div>
   
   
   	</div>);
   }