React移动端项目之pdf预览问题

目录

• React移动端项目之pdf预览
• 引入react-pdf包
• 封装pdf组件：（官网demo）
• React pdf前端显示 react-pdf-js踩坑
• 报错 
• 总结

React移动端项目之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  {
    this.setState({ numPages });
  }
  render() {
    const { pageNumber, numPages } = this.state;
    return (
      

        
          
        
        
Page {pageNumber} of {numPages}
      
    );
  }
}

奉上官网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 (
            

                 
                
            
           
 
        )
 
    }
}

因为之前项目完全没有做到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 (
            

                 
                
            
           
 
        )
 
    }
}
const mapStateToProps = s => ({
    
 
})
export default connect(mapStateToProps,{ 
   
})( Test )

分页使用的是antd 然后发现antd的组件最多只有102页em。。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。