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 报错 

1. message: "Invalid PDF structure"
2. name: "InvalidPDFException"

原因引入方式不正确。

之前的代码为

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

应改为

const pdfurl = require('../../doc/test.pdf') 

......

render(){
        return (
            

                 
                
            
           

        )

    }
}

因为之前项目完全没有做到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 (
            

                 
                
            
           

        )

    }
}
const mapStateToProps = s => ({
    

})
export default connect(mapStateToProps,{ 
   
})( Test )

分页使用的是antd 然后发现antd的组件最多只有102页em。。