{"id":20393367,"url":"https://github.com/foxitsoftware/foxitpdfsdkforweb-reactjs-example","last_synced_at":"2026-01-31T17:02:13.829Z","repository":{"id":42195067,"uuid":"249605658","full_name":"foxitsoftware/FoxitPDFSDKForWeb-ReactJS-Example","owner":"foxitsoftware","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-02T01:27:02.000Z","size":896,"stargazers_count":2,"open_issues_count":11,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-08T01:06:01.557Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foxitsoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-03-24T03:40:25.000Z","updated_at":"2024-07-02T01:27:06.000Z","dependencies_parsed_at":"2023-02-06T15:45:57.867Z","dependency_job_id":"a3fb144a-d19d-44f9-b413-c585e79235cf","html_url":"https://github.com/foxitsoftware/FoxitPDFSDKForWeb-ReactJS-Example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/foxitsoftware/FoxitPDFSDKForWeb-ReactJS-Example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-ReactJS-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-ReactJS-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-ReactJS-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-ReactJS-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foxitsoftware","download_url":"https://codeload.github.com/foxitsoftware/FoxitPDFSDKForWeb-ReactJS-Example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-ReactJS-Example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28948356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T14:26:55.697Z","status":"ssl_error","status_checked_at":"2026-01-31T14:26:52.545Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T03:48:24.452Z","updated_at":"2026-01-31T17:02:13.813Z","avatar_url":"https://github.com/foxitsoftware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FoxitPDFSDK for Web Example - React.js\n\nThis 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.\n\n## Quickly run the out-of-the-box sample for reac.js\n\n_Note:The root folder of `FoxitPDFSDK for Web` is referred as `root` in the following._\n\nFoxitPDFSDK for Web provides a boilerplate project for React app which was created with WebPack and Babel.\n\n### Overview the project structure\n\n```sh\n├─app/\n│  ├─components/\n│  │  └─PDFViewer/\n│  ├─containers/\n│  │  └─App/\n│  ├─app.js\n│  ├─index.html\n│  ├─preload.js\n│  └─license-key.js\n├─development/\n│  ├─webpack/\n│  │    ├─...\n├─package.json\n├─babel.config.js\n```\n\n#### Key directory and files descriptions\n\n|        File/Folder        |                                        Description                                        |\n| :----------------------- | :---------------------------------------------------------------------------------------: |\n|           app/            |                        Contains all JS and CSS files for the app.                         |\n| app/components/PDFViewer/ |                Contains the initilization plugins for FoxitPDFSDK for Web.                |\n|      app/preload.js       |                     This entry point used to preload SDK core assets.                     |\n|        app/app.js         |                             The entry point for application.                              |\n|       development/        | Contains automated scripts for packaging in dev mode, application initialization and etc. |\n|       package.json        |                  Lists dependencies, version build information and ect.                   |\n\n### Prerequisites\n\n- [Nodejs](https://nodejs.org/en/) and [npm](https://www.npmjs.com)\n- [FoxitPDFSDK for Web](https://developers.foxit.com/products/web/)\n\n### Getting started\n\nClone the repository to any location:\n\n```bash\ngit clone https://github.com/foxitsoftware/FoxitPDFSDKForWeb-ReactJS-Example.git\n```\n\nNavigate to `FoxitPDFSDKForWeb-Reactjs-Example/`, and execute:\n\n```bash\ncd ./FoxitPDFSDKForWeb-Reactjs-Example\nnpm install\n```\n\nThis step will download all dependencies into `node_modules` folder.\n\nPlace the `license-key.js` into `ReacJS/app`. You can find the license information at `SDK/examples/`\n\n### Reference the fonts\n\nIf 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.\n\n### Reference the `Service-Worker-Allowed` HTTP header\n\nStarting 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:\n\n```http\nService-Worker-Allowed /;\n```\n\n#### Nginx 配置示例\n\nIf 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：\n\n```nginx\nserver {\n    location /sw.js {\n        add_header Service-Worker-Allowed /;\n    }\n}\n```\n\n#### Webpack Dev Server 配置示例\n\nIf 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：\n\n```js\n// webpack.config.js\nmodule.exports = {\n    // 其他配置\n    devServer: {\n        headers: {\n            'Service-Worker-Allowed': '/'\n        }\n    }\n};\n```\n\n### Referening Addons\n\nIf 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](http://webviewer-demo.foxitsoftware.com/docs/developer-guide/ui-extension/addons/introduction.html) for detailed introductions.\n\nHere 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.\n\n\n#### 1. Reference fragmented addons\n\nThis 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:\n\n```js\nthis.pdfui = new UIExtension.PDFUI({\n    addons: [\n        the_path_to_foxit_lib + '/uix-addons/file-property/addon.info.json',\n        the_path_to_foxit_lib + '/uix-addons/full-screen/addon.info.json',\n        // .etc\n    ],\n    // other options\n});\n```\n\nWhere `the_path_to_foxit_lib` is the SDK lib folder，\n\n#### 2.  Import modular addons\n\n1. Install\n\n   ```sh\n   npm i -D @foxitsoftware/addon-loader\n   ```\n\n2. update `development/webpack/webpack.base.js` configuration:\n\n    ```js\n    {\n        test: /addon\\.info\\.json$/,\n        use: [{\n            loader: 'babel-loader',\n            options: options.babelLoaderOptions\n        }, '@foxitsoftware/addon-loader'],\n        type: 'javascript/auto'\n    }\n    ```\n\n3. In`components/PDFViewer/index.js`, import `addon.info.json` for each addon:\n\n    ```js\n        import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library'\n        import filePropertyAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/file-property/addon.info.json';\n        import multiMediaAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/multi-media/addon.info.json';\n        import passwordProtectAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/password-protect/addon.info.json';\n        import redactionAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/redaction/addon.info.json';\n        import pathObjectsAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/path-objects/addon.info.json';\n        import printAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/print/addon.info.json';\n        import fullScreenAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/full-screen/addon.info.json';\n        import importFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/import-form/addon.info.json';\n        import exportFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/export-form/addon.info.json';\n        import undoRedoAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/undo-redo/addon.info.json';\n        import textObjectAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/text-object/addon.info.json';\n        import thumbnailAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/thumbnail/addon.info.json';\n        import formDesignerAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/form-designer/addon.info.json';\n        import formToSheetAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/form-to-sheet/addon.info.json';\n        import readAloudAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/read-aloud/addon.info.json';\n        import hContinuesAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/h-continuous/addon.info.json';\n        import RecognitionFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/recognition-form/addon.info.json';\n        import pageTemplateAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/page-template/addon.info.json';\n        import xfaFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/xfa-form/addon.info.json';\n\n    ```\n\n     And pass addons to the PDFUI constructor:\n\n    ```js\n        const libPath = '/foxit-lib/';\n        this.pdfui = new UIExtension.PDFUI({\n            addons: [\n                filePropertyAddon,\n                multiMediaAddon,\n                passwordProtectAddon,\n                redactionAddon,\n                pathObjectsAddon,\n                printAddon,\n                fullScreenAddon,\n                importFormAddon,\n                exportFormAddon,\n                undoRedoAddon,\n                thumbnailAddon,\n                formToSheetAddon,\n                readAloudAddon,\n                hContinuesAddon,\n                RecognitionFormAddon,\n                pageTemplateAddon,\n                xfaFormAddon\n            ].concat(\n                // text-object and form-designer addon is disabled on mobile platform\n                UIExtension.PDFViewCtrl.DeviceInfo.isMobile\n                    ? []\n                    : [\n                        textObjectAddon, \n                        formDesignerAddon\n                    ]\n            ),\n            // other options\n        });\n    ```\n\n#### 3. Reference allInOne.js\n\nThe 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:\n\n```js\n// ...\nimport * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library';\nimport * as Addons from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/allInOne.js';\n// ...\n```\n\n And pass parameters to the PDFUI constructor:\n\n```js\nthis.pdfui = new UIExtension.PDFUI({\n    addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile\n        ? Addons.filter(it =\u003e it.getName() !== 'textEditObject')\n        : Addons,\n    // other options\n});\n```\n\n#### Comparions of addons reference methods\n\n|Referene method|Configuration|HTTP Requests|Modifiable (e.g Localization resoures, and addon.info.json)|\n|--|--|--|--|\n|Fragmentized|No|n+|Yes|\n|Modularized|Configure gulp|0|Yes,but should re-merge the addons after modification |\n|allInOne.js|No|1|No|\n\nNote: You can rebuild allInOne.js by using our [Addons merge tools](http://webviewer-demo.foxitsoftware.com/docs/developer-guide/ui-extension/addons/introduction.html#merge-addons)\n\n### Runnning the example\n\nOn the shell, execute the following command to start the development service:\n\n```sh\nnpm start\n```\n\nNow you are ready to launch the app. Open your browser, navigate to `\u003chttp://127.0.0.1:9102/\u003e` to load your example.\n\n### Building\n\n```sh\nnpm run build\n```\n\nThe production will be placed into `root/integratons/react.js/dist`\n\n### Testing\n\n```sh\ncd ./dist \u0026\u0026 http-server -p 8080\n```\n\n## Integrate FoxitPDFSDK for Web into existing React.js project\n\nThis integration assumes you have React app created with Webpack and Babel.\n\n### Prerequisites\n\n- [Nodejs](https://nodejs.org/en/) and [npm](https://www.npmjs.com)\n- [Reac.js created with WebPack and Babel](https://dev.to/iamismile/how-to-setup-webpack-and-babel-for-react-59ph)\n- [FoxitPDFSDK for Web](https://developers.foxit.com/products/web/)\n\n### Webpack configuration\n\nLet's call the root folder of your existing React project and `FoxitPDFSDK for Web` as ReactJS and SDK.\n\n1. Setup Webpack and Babel for our React app\n   - `mkdir my-react-app`\n   - `cd my-react-app`\n   - `mkdir app development`\n2. Initialize the project by running\n   - `npm init -y`\n3. Install Webpack \u0026 React\n   - `npm install webpack webpack-cli terser-webpack-plugin --save-dev`   \n4. Create and configure the following 3 files in the `./development/webpack` folder:\n\n   - `webpack.base.js`\n   - `webpack.dev.js`\n   - `webpack.prod.js`\n\n   For the configuration details, refer to the counterpart files in \u003chttps://github.com/foxitsoftware/FoxitPDFSDKForWeb-Reactjs-Example/tree/master/development/webpack\u003e. You can also directly duplicate the files to `./development/webpack`\n\n2. Configure npm scripts in package.json\n\n    ```json\n        \"scripts\": {\n            \"start\": \"webpack-dev-server --config development/webpack/webpack.dev.js\",\n            \"build\": \"webpack --config development/webpack/webpack.prod.js\"\n        }\n    ```\n\n### Adding dependencies and entry point files\n\n1. Install the lattest version of `@foxitsoftware/foxit-pdf-sdk-for-web-library`.\n\n   ```bash\n   npm i -S @foxitsoftware/foxit-pdf-sdk-for-web-library\n   ```\n\n2. Install the `@foxitsoftware/addon-loader`\n\n    ```bash\n    npm i -D @foxitsoftware/addon-loader\n    ```\n\n3. Copy the `license-key.js` to `./app`\n4. Create and configure the following files in ReacJS:\n\n   - the [babel.config.js](https://www.npmjs.com/package/@babel/preset-react)\n   - the `../app/components/PDFViewer/index.js`\n   - the `../app/containers/App/index.js`\n   - the `index.html`,`app.js` and `preload.js` inside `../app/`\n\n   For the configuration details, refer to the corresponding files in \u003chttps://github.com/foxitsoftware/FoxitPDFSDKForWeb-ReactJS-Example\u003e. You can also directly duplicate those files into the counterpart folders in ReactJS.\n\nBesides, to correctly referene your fonts lib, you also need to duplicate the `external` folder inside SDK to `./app/assets`.\n\n5. Install React:\n   - `npm install react@17.0.2`\n   - `npm install react-dom@17.0.2`\n6. Install \u0026 Configure Babel\n   - `npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev`    \n7. Install DevServer\u0026 webpack plugin:\n   - `npm install webpack-dev-server html-webpack-plugin copy-webpack-plugin --save-dev`\n   - `npm install react-app-polyfill babel-plugin-styled-components`\n   - `npm install css-loader style-loader --save-dev`\n   - `npm install styled-components --save-dev`\n### Running your application\n\n```sh\nnpm run start\n```\n\nNow everything is set up. Open your browser, navigate to \u003chttp://127.0.0.1:9102/\u003e to launch your application.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-reactjs-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-reactjs-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-reactjs-example/lists"}