React移動端項(xiàng)目之pdf預(yù)覽問題

更新時(shí)間：2023年02月12日 14:30:26 作者：wo_dxj

這篇文章主要介紹了React移動端項(xiàng)目之pdf預(yù)覽問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React移動端項(xiàng)目之pdf預(yù)覽

因?yàn)轫?xiàng)目需要，需要在在項(xiàng)目中實(shí)現(xiàn)pdf文件遇見功能，眾所周知，安卓老大哥貌似不怎么支持，所以采用的react-pdf插件實(shí)現(xiàn)方式，實(shí)現(xià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ù)覽下頁，就需要自己做分頁，改變page屬性的值，后期想的解決辦法就是滾動翻頁代替點(diǎn)擊翻頁，雖然還是單頁預(yù)覽但是稍微比點(diǎn)擊翻頁好點(diǎn)，后期小編突發(fā)奇想，渲染多個(gè)封裝的pdf組件，每個(gè)組件只顯示一頁pdf內(nèi)容，嘗試了下還是可以實(shí)現(xiàn)常預(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中沒有做相對應(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 )

分頁使用的是antd 然后發(fā)現(xiàn)antd的組件最多只有102頁em。。