JavaScript快速入门：ComPDFKit PDF SDK 快速构建 Web端 PDF阅读器

在当今丰富的网络环境中，处理 PDF 文档已成为企业和开发人员的必需品。ComPDFKit 是一款支持 Web 平台并且功能强大的 PDF SDK，开发人员可以利用它创建 PDF 查看器和编辑器，让您的最终用户轻松查看和编辑 PDF。无论您是在构建基于 Web 端的文档管理系统还是在线协作平台，ComPDFKit 都能为您提供所需的工具和功能，让您的应用程序更上一层楼。

在本博客中，我们将首先探讨集成 ComPDFKit PDF SDK 和使用 ComPDFKit 构建 Web PDF 阅读器的必要步骤。

ComPDFKit PDF SDK for Web 入门

ComPDFKit 是一款功能强大的 PDF SDK。只需数行 Javascript 代码即可将 ComPDFKit PDF SDK 轻松地嵌入到您的 Web 应用程序中。让我们用几分钟时间开始使用。

下面将介绍使用 ComPDFKit PDF SDK 的要求、安装包结构以及如何在 Javascript 中制作 Web PDF 阅读器。

The following sections introduce the requirements, structure of the installation package, and how to make a Web PDF Reader in Javascript with ComPDFKit PDF SDK.

要求

ComPDFKit PDF SDK for Web 不依赖 Node.js 和 npm，但在开发环境运行时需要它们。

Node.js 的最新稳定版本。
在开发环境运行之前，你应该安装 Node.js 和 npm。
ComPDFKit PDF SDK for Web 支持大多数主流浏览器，最好使用最新版本。目前不支持 IE 浏览器。

Web 包结构

您可以联系我们获取我们的 PDF SDK 安装包。下载并解压 ComPDFKit PDF SDK for Web 软件包。您将在 SDK 软件包中看到以下所有文件。

- ComPDFKit-Web-Viewer-Demo - 包含 Web 示例项目的文件夹。

- Lib - 包含 ComPDFKit SDK 的文件夹。

- ComPDFKit Web Viewer.md - 开发者文档和API参考文档。

- Core&UI.txt - 第三方代码使用协议。

- legal.txt - 法律和版权信息。

- release_note.txt - Release信息。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9KDImBu-1690534369668)(./pics/folder.png)

用 JavaScript 构建 Web PDF 阅读器

这里将通过逐步说明的方式，帮助您快速开始使用 ComPDFKit PDF SDK for Web 在 Javascript 中制作 Web 应用程序。通过以下步骤，您将获得一个可以显示指定 PDF 文件内容的简单 Web 应用程序。

第一步：添加 ComPDFKit PDF SDK 包

将 @compdfkit 文件夹添加到项目的根目录或 assets 目录下的 lib 目录中。这将作为 ComPDFKit PDF SDK for Web 的入文件，并将它导入到您的项目中。
Add the webviewer folder that contains the static resource files required for running the ComPDFKit Web Viewer, and the example folder that contains sample PDF files to your project's static resource folder.
将包含运行 ComPDFKit PDF SDK for Web 所需的静态资源文件的 webviewer 文件夹添加到项目的静态资源文件夹中。

第二部：显示PDF文档

将 @compdfkit 文件夹中的 webviewer.js 文件导入到您的项目中。
调用 ComPDFKitViewer.init() 在您的项目中初始化 ComPDFKit Web Viewer。
将要显示的 PDF 地址和许可证密钥传递给 init 函数

javascript 复制代码

// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from "/@compdfkit/webviewer";
const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  console.log('ComPDFKit Web Viewer loaded');
})

项目运行后，您就可以看到要显示的 PDF 文件了。

故障排除

如果您在集成ComPDFKit PDF SDK for Web 时遇到问题，请随时联系ComPDFKit 团队。