# Integrating FoxitPDFSDKForWeb Via NPM
FoxitPDFSDKForWeb versions 7.5.0+ support integrating from npm. Since SDK requires static resources to be served, there is an extra step is required which involves manually copying those static files into your dist directory.
# 1. Install via NPM
npm i @foxitsoftware/foxit-pdf-sdk-for-web-library
# 2. Copy static assets
After installed the package, the static assets are located in node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library
and must be moved into a location that will be served and publicly accessible(usually a dist
or build
folter):
# npm script
install
cp-cli
package:npm i -D cp-cli
then add a script to your
package.json
.{ "scripts": { "move-sdk-assets": "cp-cli ./node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib ./dist/lib", "build": "mybuildscript && npm run move-sdk-assets" } }
This will copy all required files into dist/lib
folder before your build is started.
# Webpack
If you're using webpack to bundle your project, you can use copy-webpack-plugin (opens new window) to copy files automatically.
Install the package:
npm i -D copy-webpack-plugin
then add the following to your webpack config:
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
...otherConfig,
plugins: [
new CopyWebpackPlugin({
patterns: [{
from: './node_modules/@foxitsoftware/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib',
to: './dist/lib'
}]
})
]
};
Please refer to this address (opens new window) for the complete webapack configuration.
# 3 Usage
After completing the above copy resource operation, we can get the access path of a resource, which will be used in the initialization parameters
var PDFUI = UIExtension.PDFUI;
var Events = UIExtension.PDFViewCtrl.Events;
var pdfui = new PDFUI({
viewerOptions: {
libPath: '/lib',
jr: {
workerPath: '/lib/',
enginePath: '/lib/jr-engine/gsdk',
fontPath: 'https://webpdf.foxitsoftware.com/webfonts/',
licenseSN: licenseSN,
licenseKey: licenseKey
}
},
renderTo: '#pdf-ui',
appearance: UIExtension.appearances.adaptive,
fragments: [],
addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile
? '/lib/uix-addons/allInOne.mobile.js'
: '/lib/uix-addons/allInOne.js',
});
For more details on usage, see our online showcase on Codesandbox (opens new window);