快速运行示例

使用 HTTP 服务快速运行示例

福昕 PDF SDK 网页版提供了一系列示例工程用于构建 viewer 以及实现其他功能。示例工程位于 Foxit PDF SDK for Web 包中的 ./examples 目录下。运行该示例，您需要初始化您本地的 web 服务器，打开浏览器，输入https://localhost:port 或者对应的 IP 地址的 URL。然后，在显示的文件目录列表中，您可以选择需要使用的示例。

快速在本地系统上运行 web 服务器，您可以使用 node.js http-server:

http-server

此外，您可以通过添加 -o 参数直接在浏览器窗口中打开：

http-server -o

您也可以使用 Python 的 HTTP Serve 模块:

python -m http.server 8000

您可以参阅 Set up local server 以获取更多信息。

使用 Snapshot 功能快速运行示例

要使用一些需要后端的功能，例如 Snapshot 和协作，您应该运行 npm install 和 npm start 来快速启动 http 服务和相应的后端服务。以下是详细步骤。

在运行示例之前，您可以参考 SDK 包内的 package.json 文件，内容如下：

{
  "scripts": {
    "start": "concurrently --kill-others \"npm run start-http-server\" \"npm run start-snapshot-server\" \"npm run start-collaboration-server\"",
    "start-snapshot-server": "node ./server/snapshot/src/index -p 3002",
    "start-http-server": "node ./server/index",
    "start-collaboration-websocket-server": "node ./server/collaboration-websocket-server/src/index.js -p 9111",
    "start-collaboration-server": "node ./server/collaboration-sockjs-server/src/index.js -p 9112"
  },
  "serve": {
    "port": 8080,
    "public": "/",
    "proxy": {
      "target": "http://127.0.0.1:3002",
      "changeOrigin": true
    }
  },
  "collaboration-websocket": {
    "target": "http://127.0.0.1:9111",
    "changeOrigin": true,
    "ws": true
  },
  "collaboration-sockjs": {
    "target": "http://127.0.0.1:9112",
    "changeOrigin": true,
    "ws": true
  }
}

接下来，检查您的电脑上是否以及安装了哪个版本的 nodejs 和 npm：

node -v
v10.16.0
npm -v
6.14.1

然后，安装在 package.json 中声明的依赖项：

npm install

最后，运行 npm start 命令来启动服务。

在浏览器中访问 http://127.0.0.1:8080 ，您可以看到所有的文件和示例。

HTTP 服务配置示例

本节配置示例内容涵盖：
- 使用 Nginx 启动 Http 服务
- 使用 Nodejs 启动 Http 服务

使用 Nginx 启动 Http 服务

以 Windows 为例，假设您系统已经安装 Nginx。当您运行 Nginx 服务时，您可以直接修改 conf 目录下的 nginx.conf。在本示例中，我们直接修改 nginx.conf 配置文件来运行 webViewer。请按照如下的步骤操作：

1. 下载 SDK 压缩包，将其解压到某个文件夹下。

2. 定位到 Nginx 的安装路径，打开 Nginx/conf 目录下的 nginx.conf 文件，添加如下的监听信息：

        server {
        listen 8080;
            server_name 127.0.0.1;
   
            location / {
                alias "gotopath/FoxitPDFSDKForWeb/";
                charset utf8;
                index index.html;
            }
        }

3. 重启 Nginx 服务，则您可以在浏览器中访问 webViewer。

   对于功能完整的 webViewer，请访问如下的地址:

   http://localhost:8080/examples/UIExtension/complete_webViewer/

   对于基础的 webViewer，请访问如下的地址:

   http://localhost:8080/examples/PDFViewCtrl/basic_webViewer/

   提示

   您可以按照如上的配置运行 webViewer，但是此时截图 (snapshot) 功能是不能正常使用的。快照的图片不能被缓存到剪贴板，因此您不能根据需要将其粘贴到指定的位置。在这种情况下，请按照如下的步骤建立快照服务：

   1. 安装 node.js 9.0 或以上版本，如果已经安装，请跳过此步。
   2. 在命令行中，导航到根目录 FoxitPDFSDKForWeb。
   3. 输入 npm install 安装相关需要的依赖项。
   4. 输入 npm run start-snapshot-server 开启 snapshot 服务 (默认端口是3002)。

   备注： 如果您需要指定 snapshot 服务的端口，您可以在 Foxit PDF SDK for Web包中的 server/snapshot/package.json 文件中进行修改。找到默认端口3002，然后根据您的需要对其进行修改。

   5. 在 nginx.conf 文件中配置 Nginx 反向代理。

      
      server {
          listen 8080;
          server_name 127.0.0.1;
        
          location / {
            alias "gotopath/FoxitPDFSDKForWeb/";
            charset utf8;
            index index.html;
          }
        
          location ~ ^/snapshot/(.+)$ {
            proxy_pass http://127.0.0.1:3002/snapshot/$1$is_args$args;
            proxy_redirect off;
            proxy_request_buffering on;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          }
      }

   6. 重启 Nginx 服务，然后刷新您的浏览器，则 snapshot 功能就可以正常使用了。

使用 Nodejs 启动 Http 服务

假设您的系统已经安装 Node.js 9.0 或者更高版本。请按照如下的步骤运行 webViewer：

1. 下载 SDK 包并进行解压。在命令行中，导航到上述解压的目录，输入如下命令安装相关需要的依赖项：

   npm install

2. 输入如下命令运行 web 服务：

   npm start

3. 在浏览器中访问 webViewer。

   对于功能完整的 webViewer，请访问如下的地址：

   http://localhost:8080/examples/UIExtension/complete_webViewer/

   对于基础的 webViewer，请访问如下的地址:

   http://localhost:8080/examples/PDFViewCtrl/basic_webViewer/

   提示

   使用这种方法，您不需要配置代理，快照 (sanpshot) 功能就可以正常使用。如果您需要指定 http-server 和 snapshot 服务的端口，您可以在 SDK 包中的 package.json 文件中进行端口修改。

   如下所示，可以根据实际需要将 http-server 及 snapshot server 的默认端口 8080 和 3002 修改成其它值:

   {
     "serve":{
       "port": 8080, 
       "public": "/",
       "proxy": {
           "target": "http://127.0.0.1:3002",
           "changeOrigin": true
       }
     }
   }