1、引入react-pdf插件
npm install react-pdf
2、开始编写相关逻辑代码
- react-hook实现
import React, { Component} from 'react'
import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
const PdfComponent=（）=>{
let [totalPage, setTotalPage] = useState(1)
function onDocumentLoadSuccess({numPages}) {
setTotalPage(numPages)
}
return(
<Document
file={this.props.pdfUrl}//pdf路径
onLoadSuccess={this.onDocumentLoadSuccess} //成功加载文档后调用
renderMode="canvas" //定义文档呈现的形式
>
{
new Array(totalPage).fill('').map((item, index) => {
return <Page key={index} pageNumber={index + 1} />
})
}
</Document>
);
}
export default PdfComponent
- react中class类的写法
import React, { Component} from 'react'
import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
class PdfComponent extends Component{
constructor(props){
super(props)
this.state={
totalPage:1
}
}
onDocumentLoadSuccess=({ numPages })=> {
this.setState({
totalPage: numPages
})
}
render(){
const { totalPage}=this.state
return(
<Document
file={this.props.pdfUrl} //pdf路径
onLoadSuccess={this.onDocumentLoadSuccess} //成功加载文档后调用
renderMode="canvas" //定义文档呈现的形式
>
{
new Array(totalPage).fill('').map((item, index) => {
return <Page key={index} pageNumber={index + 1} />
})
}
</Document>
);
}
}
export default PdfComponent
