在react 360中显示pdf

react vr中文网：www.vr-react.com

react vr qq群：481244084

示例源码 github：https://github.com/LiuC520/react_vr_pdf/

如何在react 360中显示pdf

原理：
因为整个react 360就是在threejs的基础之上来的，属于webvr的一种，所以可以用渲染纹理的方式展示pdf，首先可以用canvas展示pdf，然后把这个canvas放到texture纹理之上，而在react 360的组件中可以添加纹理属性的组件正好有那么几个：Box(立方体)、Plane(平面)、Cylinder(曲面)、Model(3D模型)、Sphere(球形)。
当然你也可以自己定义组件来添加纹理的属性，后面有时间再给大家讲，如何自己自定义具有纹理的组件。
此处我用的具体的方法是：

1、用pdf.js在canvas中渲染pdf文件，在html中添加pdf.js文件

2、创建NativeModule，获取pdf并渲染

3、在client.js中添加NativeModule

4、在你的业务代码中调用Module

1、具体的代码如下

<div id="container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.min.js"></script>

    <script src="./client.bundle?platform=vr"></script>
    <script>
      // Initialize the React 360 application
      React360.init(
        'index.bundle?platform=vr&dev=true',
        document.getElementById('container'),
        {
          assetRoot: 'static_assets/',
        }
      );
    </script>

2、创建PdfModule.js

内部两个方法，一个是showPdf，传的参数是pdfurl、width 和height scale，scale是pdf的清晰度
内部原理是：创建一个canvas节点，然后给个宽高，获取到canvas的上下文，然后是showpage方法，获取pdf文件，然后渲染pdf到canvas，内部的方法就是pdf.js的方法。
最后一行

this._context.registerTextureSource('fps', this.canvas, {updateOnFrame: true}); // Needs an update each frame

这句话的意思是注册一个纹理源，注册到context上，纹理的名字是fps，第二个参数渲染的源，这个参数就是html节点，第三个参数是配置文件，这里面updateOnFrame表示每一帧都更新，如果是静态的文件，就不需要更新。

import {Module} from 'react-360-web';
let pagenum = 1 // pdf cunrrentNum
let pageRendering = true // is pdf rendering
export default class PdfModule extends Module{
    constructor(context){
        super('PdfModule')
        this._context = context
    }

    $showPdf(pdfUrl  ,width, height , scale  ){
        this.pdfUrl = pdfUrl
        this.width = width
        this.height = height
        this.scale = scale

        this.canvas = document.createElement('canvas');
        this.canvas.width = width;
        this.canvas.height = height;
        this.cx = this.canvas.getContext('2d');

        this.showPage(pagenum)

        this._context.registerTextureSource('fps', this.canvas, {updateOnFrame: true}); // Needs an update each frame
    }

 showPage  (num)  {
    const url = this.pdfUrl
    const width = this.width
    const height = this.height
    const scale = this.scale
    const canvas = this.canvas
    const ctx = this.cx
    pageRendering = true;
    // document.getElementById('content').style.display = 'block';//show pdf loading
    pdfjsLib.getDocument(url).then(function(pdf){
        if(num === 'next'){
            pagenum ++;
        }else if(num === 'last'){
            pagenum --;
        }
        if(pagenum < 1){
            pagenum = 0
            return
        }else if(pagenum > pdf.numPages){
            pagenum = pdf.numPages
            return
        }

        pdf.getPage(pagenum).then(function(page){
            const viewport = page.getViewport(scale);
            canvas.height = height;
            canvas.width = width;
            // Render PDF page into canvas context
            const renderContext = {
            canvasContext: ctx,
            viewport: viewport
            };
            var renderTask = page.render(renderContext);
            // Wait for rendering to finish
            renderTask.promise.then(function () {
            pageRendering = false;
            // document.getElementById('content').style.display = 'none';//hide pdf loading
            })
            .catch(e=>{
            pageRendering = false;
            // document.getElementById('content').style.display = 'none';//hide pdf loading
            });
        }).catch(e=>console.log(e));
    })
  }
}

3、在client.js中注册module

  const r360 = new ReactInstance(bundle, parent, {
    // Add custom options here
    fullScreen: true, nativeModules:[
      ctx => new PdfModule(ctx),
    ],
    ...options,
  });

4、在业务代码中调用pdf

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton,
  texture,
  Plane,
  NativeModules
} from 'react-360';

const PDF = NativeModules.PdfModule;
export default class show_pdf_in_react360 extends React.Component {
  componentWillMount(){
    PDF.showPdf('http://localhost:8081/output.pdf',512,1024,2)
  }

  render() {
    return (
      <View style={styles.panel}>
        <Plane
        dimWidth={512}
        dimHeight={512}
        dimDepth={100}
        texture={texture('fps')} // Use our custom texture
      />
        <View style={styles.greetingBox}>
          <VrButton onClick={()=>{
            PDF.showPage('next') // show next page
            // PDF.showPage('last') // show last page
          }}>
            <Text style={styles.text}>
              enter
            </Text>

          </VrButton>
        </View>
      </View>
    );
  }
};

示例源码 github：https://github.com/LiuC520/react_vr_pdf/