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".
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".
├─public
│ └── index.html
├─src/
│ ├─components/
│ │ ├─FoxitWebPDFApp.js
│ │ ├─FoxitWebPDFContexts.js
│ │ ├─PDFViewerRenderer.css
│ │ └─PDFViewerRenderer.js
│ ├─App.css
│ ├─App.js
│ ├─index.css
│ ├─index.js
│ └──license-key.js
├─.eslintignore
├─config-overrides.js
├─package.json
File/Folder | Description |
---|---|
src/ | Contains all JS and CSS files for the app. |
src/components/FoxitWebPDFApp.js | Initialize FoxitPDFSDK for Web and share pdfui instance through React Context . |
src/components/FoxitWebPDFContexts.js | Contains PDFUIInstanceContext and PDFUIRenderToElementContext . Subcomponents can obtain a pdfui instance via PDFUIInstanceContext.Consumer , and PDFUIRenderToElementContext is used in PDFViewerRenderer.js to provide a React ref to the FoxitWebPDFApp component to render PDF. |
src/components/PDFViewerRenderer.js | Provides an entry point for the application layer to flexibly specify where to render the PDF |
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. |
- Nodejs and npm ( Node >= 14.0.0 and npm >= 5.6 )
- Foxit PDF SDK for Web
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-Example.git
-
Place the
license-key.js
into./src/
, You can find the license information atSDK/examples/
. -
Navigate to
./create-react-app-foxitpdfsdkweb
folder, and execute:
npm install
npm run start
Now everything is set up. Open your browser, navigate to http://localhost:3000/ to launch this application.
If some text in a PDF document requires a specific font to render correctly, you need to specify a font loading path
during initialization. In this example, you can refer to the fontPath
configuration in src/components/FoxitWebPDFApp.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.
- Nodejs and npm ( Node >= 14.0.0 and npm >= 5.6 )
- React.js created by create-react-app
- Foxit PDF SDK for Web
-
Suppose you already have a project created with
create-react-app
and the directory name isapp
. If not, you can also create an empty project yourself:`npx create-react-app app`
-
In
app
folder, Updatepackage.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" },
This step avoids
'JavaScript heap out of memory'
errors during the build process. -
In
app
folder, addconfig-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' ) )
-
Copy the
external
folder inside SDK topublic
folder. -
Copy these files to your
src
folder:src/component/FoxitWebPDFApp.js src/component/FoxitWebPDFContexts.js src/component/PDFViewerRenderer.css src/component/PDFViewerRenderer.js
Of course, in order to ensure that the project structure is not disrupted, you can create another directory to store them.
-
Add the following code into your component(Please remember to import them):
<FoxitWebPDFApp> <PDFViewerRenderer /> <PDFUIInstanceContext.Consumer> {(pdfui) => { return <></>; }} </PDFUIInstanceContext.Consumer> <PDFUIInstanceContext.Consumer> {(pdfui) => { return <></>; }} </PDFUIInstanceContext.Consumer> </FoxitWebPDFApp>
For detailed usage, please refer to
src/App.js
-
Update the container size and ensure it is displayed correctly, you can refer to
src/App.css
:.App { width: 100vw; height: 100vh; }
-
Add
license-key.js
to the.eslintignore
file:license-key.js
-
Install your dependencies and run:
cd app npm install npm install -S @foxitsoftware/foxit-pdf-sdk-for-web-library npm install -D copy-webpack-plugin customize-cra react-app-rewired npm run start
NOTE If you get this error:
TypeError: compilation.getCache is not a function
Please refer to: webpack-contrib/copy-webpack-plugin#575 -
Remove the Strict mode in
src/index.js
:// ... ReactDOM.render( - <React.StrictMode> <App /> - </React.StrictMode>, document.getElementById('root') ); // ...
-
Now everything is set up. Open your browser, navigate to http://localhost:3000/ to launch your application.