react 加载预览pdf 方法总结，全面分析，pdfjs.GlobalWorkerOptions.workerSrc！！！

公司最近需要加一个pdf预览功能，但是远程镜像资源服务器那边不能放开所有ip访问，所以我们不能用正常思维去写这个组件，不多说上代码：

1.使用react-pdf插件，前提是你们公司服务器没有跨域限制

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

//在你想展示的地方放这个进去
          <Document
            file={yourpdfUrl}
            onLoadSuccess={this.onDocumentLoadSuccess}//这个是回调成功的函数
            loading={<div>Please wait!</div>}>
            <Page pageNumber={this.state.pageNum} />
          </Document>

2.对于上面的那个方法如果远程服务器允许你访问那就没啥问题，如果不能访问那就会有跨域的问题，一般来说只要不是很麻烦只要配置一下镜像存储中的跨域规则就好，但是由于公司流程很繁琐就换了种方式

让后端以base64格式返回给你前端，或者后端以文件流的方式给你你用readFile转成base64的也可以，同样用上面的插件

//这里给大家写上js bobl转base64方法
var reader = new FileReader();
reader.readAsDataURL(bobl你的文件流);
reader.onload = function(){
    console.log(reader.result); //这里就是装换成功的base64文件了
};

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

//在你想展示的地方放这个进去
          <Document
            file={'data:application/pdf;base64,'+yourpdfUrl}//关键点!!!!!!!!!!指定类型
            onLoadSuccess={this.onDocumentLoadSuccess}//这个是回调成功的函数
            loading={<div>Please wait!</div>}>
            <Page pageNumber={this.state.pageNum} />
          </Document>

如果用base64一定要指明类型！！！！！！！

4.在一个这个插件需要引用一个js文件这个文件可以cdn远程加载，也可以用本地方法

//这是本地加载
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
//cdn远程加载
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

3.如果上面的插件你觉得不好用有个神级标签你可以用叫embed

<embed src={"data:application/pdf;base64,"+this.state.PDFBlob} title=' '  type="application/pdf" style={{width:'100%',height:'600px'}} />
//这里同样需要指明类型，如果是以URl形式来的话那就直接是Url就可以了，这个插件自带了很多功能还是很不错的