关于React-file-viewer预览pdf⽂件，⽂件过⼤显⽰不出的问题
使⽤⽅法挺简单的，把包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={DocumentLoadSuccess}
>
<Page pageNumber={pageNumber}/>
</Document>
注意： Page 和 Document 是 分开引的，如果都是直接从 react-pdf 引⽤，可能会出现上述我说的问题。有兴趣的⼈，可以去试⼀下。
onLoadSuccess 接受⼀个function，默认的参数返回的是页码，即这个pdf⼀共的页数。
pageNumber 接受⼀个 Number，让其显⽰第⼏页。
通过state 管理 Number，就可以实现上⼀页和下⼀页的操作。
对⽂件的⼤⼩也有很好的适配，⾄少到10M是没啥问题的。
在React-file-view进⾏个分⽀处理，对pdf⽂件进⾏单独处理即可。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。你以为结束了嘛，其实并没有。。。在webpack打包的时候⼜出现了问题。
如何解决留在下⼀篇吧。累了！
^ - ^
发布评论