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: