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"
* 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。。

热门工具换一换