# @compdfkit\_pdf\_sdk/webviewer 中文文档

规范地址：https://npmcn.com/package/%40compdfkit_pdf_sdk/webviewer/

版本：3\.0\.0
npm 元数据更新时间：2026-10-27T14:56:39.314Z
中文译文更新时间：2026-11-10T13:35:02.430Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40compdfkit_pdf_sdk/webviewer
原文对照：https://npmcn.com/package/%40compdfkit_pdf_sdk/webviewer/?lang=original
项目主页：https://www.compdf.com/web

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：25 MB，46 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2025-05-27T11:19:49.503Z
- 最新版本发布：2026-10-27T14:56:39.102Z
- 近 30 天下载量：17681（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：36（近 12 个月 9 个）

## 中文简介

ComPDF WebViewer是一个用于 **网页** 需要PDF查看,注释,编辑,格式,签名,比较的应用程序,以及浏览器直接的安全性. 用于建立更广泛的团队 **文档工作流程** 产品,ComPDFKit也与

## 安装

```sh
npm install @compdfkit_pdf_sdk/webviewer
```

也可以使用：`pnpm add @compdfkit_pdf_sdk/webviewer`、`yarn add @compdfkit_pdf_sdk/webviewer`、`bun add @compdfkit_pdf_sdk/webviewer`

## README

# 浏览器中用于 Web QQ 视图、 注释、 编辑 & Render PDF 的 PDF SDK

ComPDF WebViewer是一个用于 **网页** 需要PDF查看,注释,编辑,格式,签名,比较的应用程序,以及浏览器直接的安全性. 用于建立更广泛的团队 **文档工作流程** 产品,ComPDFKit也与ComPDF API合作,用于 **转换**, (中文(简体) ), **OCR (英语)**,以及 **生成** 工作流程.

## \* \*为什么是ComPDF

ComPDF是网络团队的一个实际选择,这些团队需要的不只是一个低级的PDF渲染器,但不想从头开始构建完整的文档UI堆栈.

为什么开发者使用它 :

-   **浏览器渲染 :** 将 PDF 直接放在浏览器中, 并带有可随时使用的 UI .
-   **独立模式不需要后端 :** 与WebAssembly一起部署,并不断提供客户端.
-   **SaaS友好一体化:** 将文档工作流程嵌入出入口,仪表板,客户关系管理系统,以及客户化应用软件中.
-   **框架支持:** 与React,Angular,Vue,Next.js,Nuxt.js等一起使用.
-   **商业灵活性:** 独立和服务器支持的部署方案,以满足不同的产品需要.

## 现场直播

在动作中尝试 ComPDF :

-   应用许可证密钥 联系人 [ComPDF 软件](https://www.compdf.com/pricing?utm_source=npmjs&utm_medium=dev&utm_campaign=compdf_webviewer&ref_platform_id=npmjs_compdfkit) 获取 **免费30天许可证** 测试项目.
-   网络演示: [https://www.compdf.com/demo/webviewer 互联网档案馆的存檔,存档日期2013-12-02](https://www.compdf.com/demo/webviewer?utm_source=npmjs&utm_medium=dev&utm_campaign=compdf_webviewer&ref_platform_id=npmjs_compdfkit)
-   样本工程( 反应 ) : [https://github.com/ComPDF/compdfkit-web-example-resact. 互联网档案馆的存檔,存档日期2013-12-21](https://github.com/ComPDFKit/compdfkit-web-example-react)
-   样本项目(Vanilla JS): [https://github.com/ComPDFKit/compdfkit-web-example-vanilla-javascript](https://github.com/ComPDFKit/compdfkit-web-example-vanilla-javascript)

## QQ 快速启动

> 要求:Node.js最新稳定,npm相容的软件包管理器,以及有效的ComPDF网络许可证.

### 1\. 安装

```bash
npm install @compdfkit_pdf_sdk/webviewer
```

### 2\. 复制WebViewer资产

```bash
cp -a ./node_modules/@compdfkit_pdf_sdk/webviewer/dist/. ./public/webviewer
```

### 3\. 初始化观众

```js
import WebViewer from '@compdfkit_pdf_sdk/webviewer';

const viewer = document.getElementById('viewer');

WebViewer.init(
  {
    path: '/webviewer',
    pdfUrl: '/webviewer/example/developer_guide_web.pdf',
    license: '<Input your license here>',
  },
  viewer,
).then((instance) => {
  const docViewer = instance.docViewer;

  docViewer.addEvent('documentloaded', () => {
    console.log('document loaded');
  });
});
```

> 独立部署运行在浏览器中,因此渲染PDF不需要后端.

## 关键特性

-   🌐 **浏览器 PDF 渲染**  
    具有平滑导航,缩略图,并有现成文档UI的Render PDF.  
    QQ 使用大小写: SaaS 仪表板、客户端、嵌入式取景器
    
-   ✍️ **说明、表单和签名**  
    审查,标出,填充,并在浏览器内签名文档.  
    使用案例:合同工作流程、入职、协作
    
-   🛠️ **编辑文档操作( D)**  
    支持网络应用中的内容编辑,页面工作流程,文档操作.  
    QQ 使用案例:在线 PDF 编辑器,审查平台,内容操作工具
    
-   🔐 **安全比较( A)**  
    在基于浏览器的工作流程中添加安全的文档处理并比较PDF.  
    使用案例:法律审查、批准制度、质量控制
    
-   🧱 **有利于框架的一体化**  
    使用一个跨越React,Angular,Vue,Next.js等前端堆栈的PDF层.  
    QQ 使用大小写: 多团队 SaaS 平台和可再使用的前端基础设施
    
-   🔄 **通过 ComPDF API 转换/ OCR / 生成**  
    将WebViewer与后端文档处理相结合,当您的产品比内浏览器交互更需要时.  
    \* 使用大小写:发票提取、文件生成、服务器侧自动化
    

## 使用大小写

-   **文件管理系统** 基于浏览器的查看和审查
-   **PDF 编辑器** 嵌入 SaaS 产品
-   **客户门户** 表格填充、签名和安全文件交换
-   **发票处理** 在 OCR/ 提取工作流程前预览浏览器中的文件
-   **无后端查看器方案** 其中客户端渲染简化了部署

## QQ 代码片段

### 香草 JavaScript 示例

```js
import WebViewer from '@compdfkit_pdf_sdk/webviewer';

const element = document.getElementById('viewer');

WebViewer.init(
  {
    path: '/webviewer',
    pdfUrl: '/webviewer/example/developer_guide_web.pdf',
    license: '<Input your license here>',
  },
  element,
).then((instance) => {
  const docViewer = instance.docViewer;

  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit WebViewer loaded');
  });
});
```

### 反应示例

```js
import { useEffect, useRef } from 'react';
import ComPDFKitViewer from '@compdfkit_pdf_sdk/webviewer';

export default function WebViewerContainer() {
  const containerRef = useRef(null);

  useEffect(() => {
    ComPDFKitViewer.init(
      {
        path: '/',
        pdfUrl: './example/developer_guide_web.pdf',
        license: '<Input your license here>',
      },
      containerRef.current,
    ).then((core) => {
      const docViewer = core.docViewer;

      docViewer.addEvent('documentloaded', async () => {
        console.log('document loaded');
      });
    });
  }, []);

  return (
    <div
      ref={containerRef}
      style={{ width: '100%', height: '100vh', overflow: 'hidden' }}
    />
  );
}
```

## 文档和资源

| 资源 | 链接 |
| --- | --- |
| 官方文件 | [https://www.compdf.com/guides/pdf-sdk/web/overview (中文(简体) )](https://www.compdf.com/guides/pdf-sdk/web/overview?utm_source=npmjs&utm_medium=dev&utm_campaign=compdf_webviewer&ref_platform_id=npmjs_compdfkit) |
| 查看器指南 | [https://www.compdf.com/guides/pdf-sdk/web/viewer 互联网档案馆的存檔,存档日期2013-12-21](https://www.compdf.com/guides/pdf-sdk/web/viewer?utm_source=npmjs&utm_medium=dev&utm_campaign=compdf_webviewer&ref_platform_id=npmjs_compdfkit) |
| GitHub 实例 | [https://github.com/ComPDFKit/compdfkit-web-example-resact. \[2017年7月23日\] (中文(简体) )](https://github.com/ComPDFKit/compdfkit-web-example-react) |
| 演示 | [https://www.compdf.com/demo/webviewer 互联网档案馆的存檔,存档日期2013-12-02](https://www.compdf.com/demo/webviewer?utm_source=npmjs&utm_medium=dev&utm_campaign=compdf_webviewer&ref_platform_id=npmjs_compdfkit) |

## 参与

如果ComPDF帮助您的网络产品飞船更快,请QQ **在GitHub上监视我们** 支持该项目.

ComPDF是一个很适合想要浏览器渲染,可自定义的UI的团队,也是从PDF查看到完整文档工作流程的清洁升级路径.

## 常见问题

### @compdfkit\_pdf\_sdk/webviewer 是什么？

ComPDF WebViewer是一个用于 网页 需要PDF查看,注释,编辑,格式,签名,比较的应用程序,以及浏览器直接的安全性\. 用于建立更广泛的团队 文档工作流程 产品,ComPDFKit也与

### 如何安装 @compdfkit\_pdf\_sdk/webviewer？

在项目目录运行 npm install @compdfkit\_pdf\_sdk/webviewer，或使用 pnpm add / yarn add / bun add。

### @compdfkit\_pdf\_sdk/webviewer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @compdfkit\_pdf\_sdk/webviewer 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @compdfkit\_pdf\_sdk/webviewer 可以商用吗？

@compdfkit\_pdf\_sdk/webviewer 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @compdfkit\_pdf\_sdk/webviewer 的下载量有多少？

根据 npm 官方下载统计，@compdfkit\_pdf\_sdk/webviewer 在 2026/10/11 – 2026/11/09 这 30 天内被下载 17,681 次，日均约 589 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @compdfkit\_pdf\_sdk/webviewer 还在维护吗？

最新版本 3\.0\.0 发布于 2026/10/27（13 天前）；至今共发布 36 个版本，其中过去 12 个月发布了 9 个；首次发布于 2025/05/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。