React 移动端项目之pdf预览

时间：2025-02-18 09:45:45

 

     因为项目需要，需要在在项目中实现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';

//如果报错 

    

  1. 

    

    Uncaught SyntaxError: Unexpected token <

    

    2. 

  2. 

    

    
index.js:1452 
    

    3. 

    

  1. 

    

    
Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".
    

    2. 

  2. 

    

        at :10999

    

    3. 

//就增加这两句

import { pdfjs } from 'react-pdf';

 = `//cdnjs.cloudflare.com/ajax/libs//${}/`;

 

class MyApp extends Component {

  state = {

    numPages: null,

    pageNumber: 1,

  }

 

  onDocumentLoadSuccess = ({ numPages }) => {

    ({ numPages });

  }

 

  render() {

    const { pageNumber, numPages } = ;

 

    return (

      <div>

        <Document

          file=""

          onLoadSuccess={}

           page = {pageNumber}

        >

          <Page pageNumber={pageNumber} />

        </Document>

        <p>Page {pageNumber} of {numPages}</p>

      </div>

    );

  }

}

奉上官网demo地址/package/react-pdf

需求暂时可以实现，但是不完美的是这个插件 实现的是pdf文件分页预览法，以为这不能够常预览，想预览下页，就需要自己做分页，改变page属性的值，后期想的解决办法就是滚动翻页代替点击翻页，虽然还是单页预览但是稍微比点击翻页好点，后期小编突发奇想，渲染多个封装的pdf组件，每个组件只显示一页pdf内容，尝试了下还是可以实现常预览的，至于性能方面，小编的意思是在加载完第一页之后在渲染之后的，防止一次加载同一文件多次，浪费性能

相关文章