主要技术 react-pdf, react(lazy Suspense) react-dom节点的插入, 原生Dom节点的插入与删除
- 移动端 使用PdfReader:PDF预览组件替换掉embed标签 并替换掉 指定 dom节点
- web端使用 embed标签 直接渲染 PDF文件
- 使用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);
}
-
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>); }