Foxit PDF SDK for Web Example - React.js created by "create-react-app" (React hook)

This guide shows two examples. One introduces how to quickly run the out-of-the-box sample for react.js created by "create-react-app" in Foxit PDF SDK for Web package, and the other presents a way to integrate Foxit PDF SDK for Web into React app created by "create-react-app".

Quickly run the out-of-the-box sample for Create-react-app-hook-Example

Note:The root folder of Foxit PDF SDK for Web is referred as root in the following.

Foxit PDF SDK for Web provides a boilerplate project for React app which was created by "create-react-app".

Overview the project structure

├─public
│   └── index.html
├─src/
│  ├─components/
│  │  └─PDFViewer/
│  ├─App.css
│  ├─App.js
│  ├─index.css
│  ├─index.js
│  ├─license-key.js
│  └──preload.js
├─.eslintignore
├─config-overrides.js
├─package.json

Key directory and files descriptions

File/Folder	Description
src/	Contains all JS and CSS files for the app.
src/components/PDFViewer/	Contains the initilization plugins for FoxitPDFSDK for Web.
src/preload.js	This entry point used to preload SDK core assets.
src/license-key.js	The license-key
src/App.js	The entry point for application.
config-overrides.js	Adjust the Webpack configuration
package.json	Lists dependencies, version build information and ect.

Prerequisites

• Nodejs and yarn
• Foxit PDF SDK for Web

Getting started

Let's call the Foxit PDF SDK for Web as SDK.

• Clone this repository to any location

  git clone https://github.com/foxitsoftware/Create-react-app-hook-Example.git

• Place the license-key.js into ./src/, You can find the license information at SDK/examples/.

• Navigate to ./Create-react-app-hook-Example folder, and execute:

    yarn 
    yarn start

Now everything is set up. Open your browser, navigate to http://localhost:3000/ to launch this application.

Reference the fonts

If some text in a PDF document requires a specified font to be rendered correctly, you need to specify a font loading path during initialization. In this example, you can refer to the fontPath configuration in src/preload.js. What we need to do is to copy the external folder in the SDK to the public folder so that the special font can be rendered normally.

Reference the Service-Worker-Allowed HTTP header

Starting from FoxitPDFSDK for Web version 10.0.0, since service worker is used, it is necessary to add this field in the HTTP response header of the Service Worker script. Its value is the maximum allowed scope path:

Service-Worker-Allowed /;

Nginx 配置示例

If you are using Nginx as your server, you can add the Service-Worker-Allowed response header by modifying the Nginx configuration file. Below is an example configuration：

server {
    location /sw.js {
        add_header Service-Worker-Allowed /;
    }
}

Webpack Dev Server 配置示例

If you use Webpack Dev Server for local development, you can add Service-Worker-Allowed response headers by configuring devServer. The following is a configuration example：

// webpack.config.js
module.exports = {
    // 其他配置
    devServer: {
        headers: {
            'Service-Worker-Allowed': '/'
        }
    }
};

Integrate Web SDK to react app created by "create-react-app"

Prerequisites

• Nodejs and yarn
• Reac.js created by create-react-app
• Foxit PDF SDK for Web

Getting started

1. Create the React app with "create-react-app":

   npx create-react-app app

2. In app folder, Update package.json:

   "scripts": {
       "start": "react-app-rewired --max_old_space_size=8192 start",
       "build": "react-app-rewired --max_old_space_size=8192 build",
       "test": "react-app-rewired --max_old_space_size=8192 test --env=jsdom",
       "eject": "react-app-rewired --max_old_space_size=8192 eject"
   },

3. In app folder, add config-overrides.js:

    const CopyWebpackPlugin = require("copy-webpack-plugin");
    const { override, addWebpackPlugin, addWebpackExternals} = require('customize-cra');
    const path = require("path")
    
    const libraryModulePath = path.resolve('node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library');
    const libPath = path.resolve(libraryModulePath, 'lib');
    
    module.exports = override(
        addWebpackPlugin(
            new CopyWebpackPlugin({
                patterns: [{
                    from: libPath,
                    to: 'foxit-lib',
                    force: true
                }]
            })
        ),
        addWebpackExternals(
            'UIExtension', 
            'PDFViewCtrl'
        )
    )

4. In src folder, add license-key.js, copy the content below to that file and fill in the License's KEY and SN fields.

   export const licenseKey = '';
   export const licenseSN = '';

5. In src folder, add preload.js:

    import preloadJrWorker from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/preload-jr-worker';
    import { licenseKey, licenseSN } from './license-key';
    
    const libPath = "/foxit-lib/"
    
    window.readyWorker = preloadJrWorker({
        workerPath: libPath,
        enginePath: libPath+'/jr-engine/gsdk',
        fontPath: '/external/brotli',
        licenseSN,
        licenseKey,
    });

6. Copy the external folder inside SDK to public folder.

7. In src/index.js file, import preload.js:

    import './preload.js'

8. In src folder, add components/PDFViewer/index.js:

    import React, { createRef, forwardRef, useImperativeHandle, useRef } from 'react';
    import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.full.js';
    import "@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.css";
    import * as Addons from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/allInOne.js';
    import * as mobileAddons from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/allInOne.mobile.js';
   
   
    function PDFViewer(props, ref) {
        const viewerContainerRef = useRef(null);
   
        const pdfuiInstanceRef = createRef();
   
        useImperativeHandle(ref,() => {
            if(window.pdfui){
                pdfuiInstanceRef.current = window.pdfui
                return pdfuiInstanceRef.current
            }
            const renderTo = viewerContainerRef.current;
            const libPath = "/foxit-lib/";
            const pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath,
                    jr: {
                        readyWorker: window.readyWorker
                    },
                    ...(props.viewerOptions || {})
                }
                renderTo: renderTo,
                appearance: UIExtension.appearances.adaptive,
                addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile? mobileAddons:Addons
            });
            window.pdfui = pdfuiInstanceRef.current = pdfui;
            return pdfui;
        });
        
        return <div className = "foxit-PDF" ref = { viewerContainerRef } />;
    }
    export default forwardRef(PDFViewer);

9. Update App.js:

   import { useEffect, useRef } from 'react';
   import './App.css';
   import PDFViewer from './components/PDFViewer';
   
   function App() {
       const pdfuiRef = useRef(null);
       useEffect(() => {
           const pdfui = pdfuiRef.current;
           if(!pdfui) {
               return;
           }
           // Here, you can do anything with the pdfui instance.
           function handleWindowResize() {
               pdfui.redraw();
           }
           window.addEventListener('resize', handleWindowResize);
           return () => {
               // Here, you can perform any destruction actions.
               window.removeEventListener('resize', handleWindowResize);
           };
       }, [pdfuiRef]);
       const externalViewerOptions = {
           // more viewer options
       };
       return (
           <div className="App">
               <PDFViewer ref={pdfuiRef} viewerOptions={externalViewerOptions}></PDFViewer>
           </div>
       );
   }
   
   export default App;

10. Update App.css

    #root,.App,.foxit-PDF{
        height: 100%;
    }

11. Install dependencies and run:

    cd app
    yarn add @foxitsoftware/foxit-pdf-sdk-for-web-library 
    yarn add [email protected] [email protected] [email protected] -D
    yarn start

Now everything is set up. Open your browser, navigate to http://localhost:3000/ to launch your application.