react集成react-pdf获取文件流预览下载pdf，展示电子签章

1.下载依赖包

代码如下（示例）：

npm install react-pdf

2.引入依赖包

代码如下（示例）：

import { Document, Page } from 'react-pdf';

2.预览pdf

代码如下（示例）：

//pdf展示 <Document file={this.state.PDFBlob} //文件路径或者base64 // onLoadSuccess={onDocumentLoadSuccess} //成功加载文档后调用 onLoadError={console.error} //加载失败时调用 renderMode="canvas" //定义文档呈现的形式 loading="正在努力加载中" //加载时提示语句 externalLinkTarget="_blank" > <Page width={800} pageNumber={1} scale={1}/> {/* //scale 呈现的比例 */} </Document> //获取后端返回的文件流 YLPDF = (oddNum) => { this.setState({oddNum: oddNum}); let url = `${API_UPLOAD_URL}/newAuz/reportAuzPDF`; let xhr = new XMLHttpRequest(); let that = this; xhr.open('POST', url, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.responseType = 'blob'; //返回类型blob xhr.send("oddNum=" + oddNum); xhr.onload = function () { //定义请求完成的处理函数 if (this.status === 200) { if (this.response.type === 'application/json') { Msg.alert("PDF文件获取失败!") } else { let blob = this.response; that.setState({blob:this.response}) let reader = new FileReader(); reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href reader.addEventListener("load", function () { console.log(reader, 'reader.result') let base64 = reader.result that.setState({ PDFBlob: base64, }) }); } } } } //预览完成点击下载pdf PDF = () => { const oddNum = this.state.oddNum; const blob = this.state.blob; let reader = new FileReader(); reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href reader.onload = function (e) { let a = document.createElement('a'); // 转换完成，创建一个a标签用于下载 if ('msSaveOrOpenBlob' in navigator) { window.navigator.msSaveOrOpenBlob(blob, `${oddNum}.pdf`); } else { let href = window.URL.createObjectURL(blob); a.href = href; a.target = '_blank'; a.download = `${oddNum}.pdf`; //下载后文件名 document.body.appendChild(a); a.click(); //点击下载 document.body.removeChild(a); //下载完成移除元素 window.URL.revokeObjectURL(href); //释放掉blob对象 } }; }

该处PDFBlob是获取后端返回的文件流，转换成base64

3.展示电子签章

依赖包下载下来默认是不展示电子签章，现在我的处理方法是引用一个静态的pdf.worker.js，注释里面隐藏的电子签章功能相关代码：

import { Document, Page, pdfjs } from 'react-pdf'; //更改引入pdf.worker.js路径 //将pdf.worker.js中的this.setFlags(AnnotationFlag.HIDDEN);注释掉就会显示电子签章，反之不显示。 pdfjs.GlobalWorkerOptions.workerSrc = `${API_UPLOAD_URL}manage/pdf.worker.js`;

---

具体使用方法可以参考文档 react-pdf: