React移動(dòng)端項(xiàng)目之pdf預(yù)覽問題
React移動(dòng)端項(xiàng)目之pdf預(yù)覽
因?yàn)轫?xiàng)目需要,需要在在項(xiàng)目中實(shí)現(xiàn)pdf文件遇見功能,眾所周知,安卓老大哥貌似不怎么支持,所以采用的react-pdf插件實(shí)現(xiàn)方式,實(shí)現(xiàn)方式很簡(jiǎn)單:
引入react-pdf包
yarn add react-pdf 或者npm install react-pdf --save
封裝pdf組件:(官網(wǎng)demo)
import?React,?{?Component?}?from?'react'; import?{?Document,?Page?}?from?'react-pdf'; //如果報(bào)錯(cuò)? 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> ????); ??} }
奉上官網(wǎng)demo地址https://www.npmjs.com/package/react-pdf
需求暫時(shí)可以實(shí)現(xiàn),但是不完美的是這個(gè)插件 實(shí)現(xiàn)的是pdf文件分頁(yè)預(yù)覽法,以為這不能夠常預(yù)覽,想預(yù)覽下頁(yè),就需要自己做分頁(yè),改變page屬性的值,后期想的解決辦法就是滾動(dòng)翻頁(yè)代替點(diǎn)擊翻頁(yè),雖然還是單頁(yè)預(yù)覽但是稍微比點(diǎn)擊翻頁(yè)好點(diǎn),后期小編突發(fā)奇想,渲染多個(gè)封裝的pdf組件,每個(gè)組件只顯示一頁(yè)pdf內(nèi)容,嘗試了下還是可以實(shí)現(xiàn)常預(yù)覽的,至于性能方面,小編的意思是在加載完第一頁(yè)之后在渲染之后的,防止一次加載同一文件多次,浪費(fèi)性能
React pdf前端顯示 react-pdf-js踩坑
因?yàn)闃I(yè)務(wù)需求,大佬讓我做一個(gè)poc 可以在前端展示pdf,試了很多插件,也試了大名鼎鼎的pdfjs,但是由于本身架構(gòu)就使用react,所以最后選用了react-pdf-js。
在查詢資料過程中發(fā)現(xiàn)官網(wǎng)的demo已經(jīng)打不開了。這點(diǎn)比較坑,所以只能找一些其他大佬的文章了。
webpack
- "react-pdf-js": "^4.0.1",
- "webpack": "^2.7.0"
- "react": "16.5.1",
報(bào)錯(cuò)
1.message: "Invalid PDF structure"
2.name: "InvalidPDFException"
原因引入方式不正確。
之前的代碼為
file={'../../doc/test.pdf'}
應(yīng)改為
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> ) } }
因?yàn)橹绊?xiàng)目完全沒有做到pdf 所以在webpack中沒有做相對(duì)應(yīng)的loader
報(bào)錯(cuò)
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 )
分頁(yè)使用的是antd 然后發(fā)現(xiàn)antd的組件最多只有102頁(yè)em。。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
React利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù)
這篇文章主要為大家詳細(xì)介紹了React如何利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-03-03React官方團(tuán)隊(duì)完善原生Hook閉包陷阱
這篇文章主要為大家介紹了React官方團(tuán)隊(duì)出手,補(bǔ)齊原生Hook短板閉包陷阱的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式
本篇文章主要介紹了React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01react router4+redux實(shí)現(xiàn)路由權(quán)限控制的方法
本篇文章主要介紹了react router4+redux實(shí)現(xiàn)路由權(quán)限控制的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問題
這篇文章主要介紹了react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11