React移动端项目之pdf预览
因为项目需要，需要在在项目中实现pdf文件遇见功能，众所周知，安卓老大哥貌似不怎么支持，所以采用的react-pdf插件实现方式，实现方式很简单：
引入react-pdf包
yarn add react-pdf 或者npm install react-pdf --save
封装pdf组件：（官网demo）
import?React,?{?Component?}?from?'react';
import?{?Document,?Page?}?from?'react-pdf';
//如果报错?
Uncaught SyntaxError: Unexpected token <index.js:1452
Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined". at pdf.js:10999
//就增加这两句
import?{?pdfjs?}?from?'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc?=?`//cdnjs.cloudflare测试数据/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>
????????<p>Page?{pageNumber}?of?{numPages}</p>
??????</div>
????);
??}
}
奉上官网demo地址 https://HdhCmsTestnpmjs测试数据/package/react-pdf
需求暂时可以实现，但是不完美的是这个插件 实现的是pdf文件分页预览法，以为这不能够常预览，想预览下页，就需要自己做分页，改变page属性的值，后期想的解决办法就是滚动翻页代替点击翻页，虽然还是单页预览但是稍微比点击翻页好点，后期小编突发奇想，渲染多个封装的pdf组件，每个组件只显示一页pdf内容，尝试了下还是可以实现常预览的，至于性能方面，小编的意思是在加载完第一页之后在渲染之后的，防止一次加载同一文件多次，浪费性能
React pdf前端显示 react-pdf-js踩坑
因为业务需求，大佬让我做一个poc 可以在前端展示pdf，试了很多插件，也试了大名鼎鼎的pdfjs，但是由于本身架构就使用react，所以最后选用了react-pdf-js。
在查询资料过程中发现官网的demo已经打不开了。这点比较坑，所以只能找一些其他大佬的文章了。
webpack
"react-pdf-js": "^4.0.1", "webpack": "^2.7.0" "react": "16.5.1",
报错?
1.message: "Invalid PDF structure"
2.name: "InvalidPDFException"
原因引入方式不正确。
之前的代码为
file={'doc/test.pdf'}
应改为
const pdfurl = require('doc/test.pdf')
......
render(){
return (
<div>
<PDF
file={pdfurl}
onDocumentComplete={this.onDocumentComplete.bind(this)}
page={this.state.page}
/>
<Pagination onChange={this.onChange.bind(this)} total={this.state.pages} current={this.state.page}/>
</div>
)
}
}
因为之前项目完全没有做到pdf 所以在webpack中没有做相对应的loader
报错?
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
webpack中添加如下
{
test: /\.(pdf|svg)$/,
use: 'file-loader?name=[path][name].[ext]',
}
最后就可以了 完整代码如下
import React from 'react';
import { connect } from 'react-redux';
import { Pagination } from 'antd'
const pdfurl = require('doc/test.pdf')
import PDF from 'react-pdf-js';
class Test extends React.Component {
constructor (){
super()
this.state={
"page":1,
"pages":1
}
}
onDocumentComplete(pages) {
this.setState({ page: 1, pages:pages });
}
onChange (page) {
this.setState({
page: page,
});
}
render(){
return (
<div>
<PDF
file={pdfurl}
onDocumentComplete={this.onDocumentComplete.bind(this)}
page={this.state.page}
/>
<Pagination onChange={this.onChange.bind(this)} total={this.state.pages} current={this.state.page}/>
</div>
)
}
}
const mapStateToProps = s => ({
})
export default connect(mapStateToProps,{
})( Test )
分页使用的是antd 然后发现antd的组件最多只有102页em。。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
原文地址：https://blog.csdn.net/wo_dxj/article/details/105246441
查看更多关于React移动端项目之pdf预览问题的详细内容...