# 通过 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 脚本

安装 cp-cli 包:
```
npm i -D cp-cli
```

然后，在 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) 上的在线示例。