关于React-file-viewer预览pdf文件，文件过大显示不出的问题
因为业务需要在线预览功能，使用的是react框架，在npm搜到React-file-viewer这个包，了解其使用的情况，发现功能和难易度都挺适合。
使用方法挺简单的，把包npm下来。
import FileViewer from 'react-file-viewer';
<FileViewer fileType={
type} filePath={
file} />
fileType是文件的类型，理论上支持：jpg，png，gif，docx，pdf，jpeg，xlsx文件，但在实际的测试中，对xlsx的支持不是很好，可能会出现乱码情况。
filePath 是将文件源传入，可以是Url链接，应该是支持Base64文件流的，忘了。
当时在测试的时候，除了xlsx文件，上述其他文件都显示的不错，但是在显示Pdf文件的时候会显示如下的报错：
Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'arraybuffer').
当时功能是ok的，也没对文件做大小测试，前端也没做大小限制，就这样测试上线了。
近期用户反映，上传的pdf文件不能预览，文件大小是3.45M，我拿到用户上传的pdf进行测试，本地环境确实显示不了。
开始以为是
1. 文件的中文名称导致，改变名称还是显示不了。
2. 魔改的pdf文件，对PDF文件监测，是“正经的”Pdf文件。
3. 文件的大小，对pdf文件进行压缩，压缩到1.23M是再上传发现Pdf文件已损坏。。。
4. 我拿自己的大小是1.45M的文件进行测试，是显示的
但是即使是显示的,控制台还是报如上的错。
开始以为是加载包需要使用额外js，因为是单页面应用，额外的js如果在现域名发送请求，注定会走本地路由，访问不到很正常。
但实际情况是根本没有发送特定的js请求，npm上也没有对这方面的描述。
去查看React-file-view 的源码：对于pdf的预览功能，大概的实现是通过一个方法对pdf的源进行文件转码，通过特定方式对注入到新建的Canvas中，通过展示canvas实现pdf的预览。
看不出问题到底出在哪。。。
与其在这琢磨别人怎么写的，不如去寻找其他的组件包，毕竟React-file-view 也是07年的产物，上次更新也是2年前了。
关于特定的预览Pdf文件，可以选的种类就很多了。看中了React-pdf
一个周下载量达20几万的工具包。
使用方法还是如此的简单。
import {
Page } from 'react-pdf';
import {
Document } from 'react-pdf/dist/esm/entry.webpack';
<Document
file={
file}
onLoadSuccess={
this.onDocumentLoadSuccess}
>
<Page pageNumber={
pageNumber} />
</Document>
注意： Page 和 Document 是 分开引的，如果都是直接从 react-pdf 引用，可能会出现上述我说的问题。有兴趣的人，可以去试一下。
onLoadSuccess 接受一个function，默认的参数返回的是页码，即这个pdf一共的页数。
pageNumber 接受一个 Number，让其显示第几页。
通过state 管理 Number，就可以实现上一页和下一页的操作。
对文件的大小也有很好的适配，至少到10M是没啥问题的。
在React-file-view进行个分支处理，对pdf文件进行单独处理即可。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
你以为结束了嘛，其实并没有。。。在webpack打包的时候又出现了问题。
如何解决留在下一篇吧。累了！
^ - ^