React移动端项目之pdf预览问题
wo_dxj 人气:0React移动端项目之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.com/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://www.npmjs.com/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。。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容