# 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

  1. install cp-cli package:

    npm i -D cp-cli
    
  2. 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);