浏览器中用于 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 软件 获取 免费30天许可证 测试项目.
- 网络演示: https://www.compdf.com/demo/webviewer 互联网档案馆的存檔,存档日期2013-12-02
- 样本工程( 反应 ) : https://github.com/ComPDF/compdfkit-web-example-resact. 互联网档案馆的存檔,存档日期2013-12-21
- 样本项目(Vanilla JS): https://github.com/ComPDFKit/compdfkit-web-example-vanilla-javascript
QQ 快速启动
要求:Node.js最新稳定,npm相容的软件包管理器,以及有效的ComPDF网络许可证.
1. 安装
npm install @compdfkit_pdf_sdk/webviewer
2. 复制WebViewer资产
cp -a ./node_modules/@compdfkit_pdf_sdk/webviewer/dist/. ./public/webviewer
3. 初始化观众
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 示例
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');
});
});
反应示例
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' }}
/>
);
}
文档和资源
参与
如果ComPDF帮助您的网络产品飞船更快,请QQ 在GitHub上监视我们 支持该项目.
ComPDF是一个很适合想要浏览器渲染,可自定义的UI的团队,也是从PDF查看到完整文档工作流程的清洁升级路径.