亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2023年02月12日 14:30:26   作者:wo_dxj  
這篇文章主要介紹了React移動(dòng)端項(xiàng)目之pdf預(yù)覽問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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 ref的使用示例

    React ref的使用示例

    這篇文章主要介紹了React ref的使用詳解,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-04-04
  • Remix如何支持原生?CSS方法詳解

    Remix如何支持原生?CSS方法詳解

    這篇文章主要為大家介紹了Remix如何支持原生CSS的方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • React利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù)

    React利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù)

    這篇文章主要為大家詳細(xì)介紹了React如何利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下
    2024-03-03
  • react 中父組件與子組件雙向綁定問題

    react 中父組件與子組件雙向綁定問題

    這篇文章主要介紹了react 中父組件與子組件雙向綁定問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-05-05
  • 在react中使用tailwind的問題

    在react中使用tailwind的問題

    這篇文章主要介紹了在react中使用tailwind的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • react diff算法源碼解析

    react diff算法源碼解析

    這篇文章主要介紹了react diff算法源碼解析的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用react,感興趣的朋友可以了解下
    2021-04-04
  • React官方團(tuán)隊(duì)完善原生Hook閉包陷阱

    React官方團(tuán)隊(duì)完善原生Hook閉包陷阱

    這篇文章主要為大家介紹了React官方團(tuán)隊(duì)出手,補(bǔ)齊原生Hook短板閉包陷阱的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式

    React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式

    本篇文章主要介紹了React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-01
  • react router4+redux實(shí)現(xiàn)路由權(quán)限控制的方法

    react router4+redux實(shí)現(xiàn)路由權(quán)限控制的方法

    本篇文章主要介紹了react router4+redux實(shí)現(xiàn)路由權(quán)限控制的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05
  • react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問題

    react實(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

最新評(píng)論