react-pdf 实战实例

2021年3月23日 11点热度 0条评论 来源: shuxiaoxii

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


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.  移动端 使用PdfReader:PDF预览组件替换掉embed标签 并到 指定 dom节点
  2.  web端使用 embed标签 直接渲染 PDF文件
    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>);
    }
    

     

 

 

    原文作者:shuxiaoxii
    原文地址: https://blog.csdn.net/shuxiaoxii/article/details/115115266
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。