# # 通过 NPM 集成 Foxit PDF SDK for Web

Foxit PDF SDK for Web 从版本 7.5.0 开始支持通过 NPM 集成。由于 SDK 需要加载静态资源，因此需要额外执行一个步骤，即手动将这些静态文件复制到您的 dist 目录中。

## # 1. 通过 NPM 安装

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

## # 2. 拷贝静态资源

安装软件包后，静态资源位于 `node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library` 中，必须将其移动到一个可以被服务并公开访问的位置（通常是一个 `dist` 或 `build` 文件夹）：

### # npm 脚本

1. 安装 `cp-cli` 包:

       npm i -D cp-cli

2. 然后，在 `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"
           }
       }

这将在开始构建之前，把所有必需的文件复制到 `dist/lib` 文件夹中。

### # Webpack

如果您使用 webpack 来打包项目，可以使用 copy-webpack-plugin
(opens new window) 来自动复制文件。

安装该包：

    npm i -D copy-webpack-plugin

然后将以下内容添加到你的 webpack 配置中：

    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'
                }]
            })
        ]
    };

完整的 webpack 配置请参考 webpack.config.js
(opens new window)。

## # 3 使用方法

完成上述复制资源操作后，我们可以获得资源的访问路径，该路径将用于初始化参数中。

    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',
    });

关于具体的使用详情，请访问 Codesandbox
(opens new window) 上的在线示例。