This guide shows two examples. One introduces how to quickly run the out-of=the-box sample for react.js in FoxitPDFSDK for Web package, and the other presents a way to integrate FoxitPDFSDK for Web into an exiting React app created with WebPack and Babel.

Note:The root folder of FoxitPDFSDK for Web is referred as root in the following.

FoxitPDFSDK for Web provides a boilerplate project for React app which was created with WebPack and Babel.

├─app/
│  ├─components/
│  │  └─PDFViewer/
│  ├─containers/
│  │  └─App/
│  ├─app.js
│  ├─index.html
│  ├─preload.js
│  └─license-key.js
├─development/
│  ├─webpack/
│  │    ├─...
├─package.json
├─babel.config.js

• Nodejs and npm
• FoxitPDFSDK for Web

Clone the repository to any location:

git clone https://github.com/foxitsoftware/FoxitPDFSDKForWeb-ReactJS-Example.git

Navigate to FoxitPDFSDKForWeb-Reactjs-Example/, and execute:

cd ./FoxitPDFSDKForWeb-Reactjs-Example
npm install

This step will download all dependencies into node_modules folder.

Place the license-key.js into ReacJS/app. You can find the license information at SDK/examples/

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 app/preload.js. What we need to do is to copy the external folder in the SDK to the app/assets folder so that the special font can be rendered normally.

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 /;

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 /;
    }
}

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': '/'
        }
    }
};

If you are integrating FoxitPDFSDK for Web into your existing React project, you should read this section before continue. You may want to check out Addons for detailed introductions.

Here we introduce three ways to reference SDK addons for Anguar project, you may choose one of them based on your needs. This [Comparison](#Addons reference methods comparison) will help you to better understand the difference of the three ways and make a choice.If you need to run multiple instances, see the third method.

This method was used by default in past versions before version 7.2. You should open components/PDFViewer/index.js, and referece addons as shown below:

this.pdfui = new UIExtension.PDFUI({
    addons: [
        the_path_to_foxit_lib + '/uix-addons/file-property/addon.info.json',
        the_path_to_foxit_lib + '/uix-addons/full-screen/addon.info.json',
        // .etc
    ],
    // other options
});

Where the_path_to_foxit_lib is the SDK lib folder，

1. Install

   npm i -D @foxitsoftware/addon-loader

2. update development/webpack/webpack.base.js configuration:

   {
       test: /addon\.info\.json$/,
       use: [{
           loader: 'babel-loader',
           options: options.babelLoaderOptions
       }, '@foxitsoftware/addon-loader'],
       type: 'javascript/auto'
   }

3. Incomponents/PDFViewer/index.js, import addon.info.json for each addon:

       import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library'
       import filePropertyAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/file-property/addon.info.json';
       import multiMediaAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/multi-media/addon.info.json';
       import passwordProtectAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/password-protect/addon.info.json';
       import redactionAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/redaction/addon.info.json';
       import pathObjectsAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/path-objects/addon.info.json';
       import printAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/print/addon.info.json';
       import fullScreenAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/full-screen/addon.info.json';
       import importFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/import-form/addon.info.json';
       import exportFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/export-form/addon.info.json';
       import undoRedoAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/undo-redo/addon.info.json';
       import textObjectAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/text-object/addon.info.json';
       import thumbnailAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/thumbnail/addon.info.json';
       import formDesignerAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/form-designer-v2/addon.info.json';
       import formToSheetAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/form-to-sheet/addon.info.json';
       import readAloudAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/read-aloud/addon.info.json';
       import hContinuesAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/h-continuous/addon.info.json';
       import RecognitionFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/recognition-form/addon.info.json';
       import pageTemplateAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/page-template/addon.info.json';
       import xfaFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/xfa-form/addon.info.json';

   And pass addons to the PDFUI constructor:

       const libPath = '/foxit-lib/';
       this.pdfui = new UIExtension.PDFUI({
           addons: [
               filePropertyAddon,
               multiMediaAddon,
               passwordProtectAddon,
               redactionAddon,
               pathObjectsAddon,
               printAddon,
               fullScreenAddon,
               importFormAddon,
               exportFormAddon,
               undoRedoAddon,
               thumbnailAddon,
               formToSheetAddon,
               readAloudAddon,
               hContinuesAddon,
               RecognitionFormAddon,
               pageTemplateAddon,
               xfaFormAddon
           ].concat(
               // text-object and form-designer addon is disabled on mobile platform
               UIExtension.PDFViewCtrl.DeviceInfo.isMobile
                   ? []
                   : [
                       textObjectAddon, 
                       formDesignerAddon
                   ]
           ),
           // other options
       });

The allInOne.js already combines all addons, which locates in @foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/. To refenece this file, open components/PDFViewer/index.js, and update the code as follows:

// ...
import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library';
import * as Addons from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/allInOne.js';
// ...

And pass parameters to the PDFUI constructor:

this.pdfui = new UIExtension.PDFUI({
    addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile
        ? Addons.filter(it => it.getName() !== 'textEditObject')
        : Addons,
    // other options
});

Note: You can rebuild allInOne.js by using our Addons merge tools

On the shell, execute the following command to start the development service:

npm start

Now you are ready to launch the app. Open your browser, navigate to <http://127.0.0.1:9102/> to load your example.

npm run build

The production will be placed into root/integratons/react.js/dist

cd ./dist && http-server -p 8080

This integration assumes you have React app created with Webpack and Babel.

• Nodejs and npm
• Reac.js created with WebPack and Babel
• FoxitPDFSDK for Web

Let's call the root folder of your existing React project and FoxitPDFSDK for Web as ReactJS and SDK.

1. Setup Webpack and Babel for our React app

   • mkdir my-react-app
   • cd my-react-app
   • mkdir app development

2. Initialize the project by running

   • npm init -y

3. Install Webpack & React

   • npm install webpack webpack-cli terser-webpack-plugin --save-dev

4. Create and configure the following 3 files in the ./development/webpack folder:

   • webpack.base.js
   • webpack.dev.js
   • webpack.prod.js

   For the configuration details, refer to the counterpart files in https://github.com/foxitsoftware/FoxitPDFSDKForWeb-Reactjs-Example/tree/master/development/webpack. You can also directly duplicate the files to ./development/webpack

5. Configure npm scripts in package.json

       "scripts": {
           "start": "webpack-dev-server --config development/webpack/webpack.dev.js",
           "build": "webpack --config development/webpack/webpack.prod.js"
       }

1. Install the lattest version of @foxitsoftware/foxit-pdf-sdk-for-web-library.

   npm i -S @foxitsoftware/foxit-pdf-sdk-for-web-library

2. Install the @foxitsoftware/addon-loader

   npm i -D @foxitsoftware/addon-loader

3. Copy the license-key.js to ./app

4. Create and configure the following files in ReacJS:

   • the babel.config.js
   • the ../app/components/PDFViewer/index.js
   • the ../app/containers/App/index.js
   • the index.html,app.js and preload.js inside ../app/

   For the configuration details, refer to the corresponding files in https://github.com/foxitsoftware/FoxitPDFSDKForWeb-ReactJS-Example. You can also directly duplicate those files into the counterpart folders in ReactJS.

Besides, to correctly referene your fonts lib, you also need to duplicate the external folder inside SDK to ./app/assets.

5. Install React:
   • npm install [email protected]
   • npm install [email protected]
6. Install & Configure Babel
   • npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev
7. Install DevServer& webpack plugin:
   • npm install webpack-dev-server html-webpack-plugin copy-webpack-plugin --save-dev
   • npm install react-app-polyfill babel-plugin-styled-components
   • npm install css-loader style-loader --save-dev
   • npm install styled-components --save-dev

npm run start

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