React移动端项目之pdf预览问题.docx

第

React移动端项目之pdf预览问题

目录React移动端项目之pdf预览引入react-pdf包封装pdf组件：（官网demo）Reactpdf前端显示react-pdf-js踩坑报错总结

React移动端项目之pdf预览

因为项目需要，需要在在项目中实现pdf文件遇见功能，众所周知，安卓老大哥貌似不怎么支持，所以采用的react-pdf插件实现方式，实现方式很简单：

引入react-pdf包

yarnaddreact-pdf或者npminstallreact-pdf--save

封装pdf组件：（官网demo）

import?React,?{?Component?}?from?react;

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

//如果报错?

UncaughtSyntaxError:Unexpectedtokenindex.js:1452

Error:Settingupfakeworkerfailed:CannotreadpropertyWorkerMessageHandlerofundefined.atpdf.js:10999

//就增加这两句

import?{?pdfjs?}?from?react-pdf;

pdfjs.GlobalWorkerOptions.workerSrc?=?`///ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

class?MyApp?extends?Component?{

??state?=?{

????numPages:?null,

????pageNumber:?1,

??onDocumentLoadSuccess?=?({?numPages?})?=?{

????this.setState({?numPages?});

??render()?{

????const?{?pageNumber,?numPages?}?=?this.state;

????return?(

??????div

????????Document

??????????file=somefile.pdf

??????????onLoadSuccess={this.onDocumentLoadSuccess}

??????page={pageNumber}

????????

??????????Page?pageNumber={pageNumber}?/

????????/Document

????????pPage?{pageNumber}?of?{numPages}/p

??????/div

????);

}

奉上官网demo地址/package/react-pdf

需求暂时可以实现，但是不完美的是这个插件实现的是pdf文件分页预览法，以为这不能够常预览，想预览下页，就需要自己做分页，改变page属性的值，后期想的解决办法就是滚动翻页代替点击翻页，虽然还是单页预览但是稍微比点击翻页好点，后期小编突发奇想，渲染多个封装的pdf组件，每个组件只显示一页pdf内容，尝试了下还是可以实现常预览的，至于性能方面，小编的意思是在加载完第一页之后在渲染之后的，防止一次加载同一文件多次，浪费性能

Reactpdf前端显示react-pdf-js踩坑

因为业务需求，大佬让我做一个poc可以在前端展示pdf，试了很多插件，也试了大名鼎鼎的pdfjs，但是由于本身架构就使用react，所以最后选用了react-pdf-js。

在查询资料过程中发现官网的demo已经打不开了。这点比较坑，所以只能找一些其他大佬的文章了。

webpack

react-pdf-js:^4.0.1,webpack:^2.7.0react:16.5.1,

报错

1.message:InvalidPDFstructure

2.name:InvalidPDFException

原因引入方式不正确。

之前的代码为

file={../../doc/test.pdf}

应改为

constpdfurl=require(../../doc/test.pdf)

render(){

return(

div

file={pdfurl}

onDocumentComplete={this.onDocumentComplete.bind(this)}

page={this.s