JavaScript快速入門：ComPDFKit PDF SDK 快速構(gòu)建 Web端 PDF閱讀器

在當(dāng)今豐富的網(wǎng)絡(luò)環(huán)境中，處理 PDF 文檔已成為企業(yè)和開(kāi)發(fā)人員的必需品。ComPDFKit 是一款支持 Web 平臺(tái)并且功能強(qiáng)大的 PDF SDK，開(kāi)發(fā)人員可以利用它創(chuàng)建 PDF 查看器和編輯器，讓您的最終用戶輕松查看和編輯 PDF。無(wú)論您是在構(gòu)建基于 Web 端的文檔管理系統(tǒng)還是在線協(xié)作平臺(tái)，ComPDFKit 都能為您提供所需的工具和功能，讓您的應(yīng)用程序更上一層樓。

在本博客中，我們將首先探討集成 ComPDFKit PDF SDK 和使用 ComPDFKit 構(gòu)建 Web PDF 閱讀器的必要步驟。

ComPDFKit PDF SDK for Web 入門

ComPDFKit 是一款功能強(qiáng)大的 PDF SDK。只需數(shù)行 Javascript 代碼即可將 ComPDFKit PDF SDK 輕松地嵌入到您的 Web 應(yīng)用程序中。讓我們用幾分鐘時(shí)間開(kāi)始使用。

下面將介紹使用 ComPDFKit PDF SDK 的要求、安裝包結(jié)構(gòu)以及如何在 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，但在開(kāi)發(fā)環(huán)境運(yùn)行時(shí)需要它們。

• Node.js 的最新穩(wěn)定版本。
• 在開(kāi)發(fā)環(huán)境運(yùn)行之前，你應(yīng)該安裝 Node.js 和 npm。
• ComPDFKit PDF SDK for Web 支持大多數(shù)主流瀏覽器，最好使用最新版本。目前不支持 IE 瀏覽器。

Web 包結(jié)構(gòu)

您可以聯(lián)系我們獲取我們的 PDF SDK 安裝包。下載并解壓 ComPDFKit PDF SDK for Web 軟件包。您將在 SDK 軟件包中看到以下所有文件。

? - ComPDFKit-Web-Viewer-Demo - 包含 Web 示例項(xiàng)目的文件夾。

? - Lib - 包含 ComPDFKit SDK 的文件夾。

? - ComPDFKit Web Viewer.md - 開(kāi)發(fā)者文檔和API參考文檔。

? - Core&UI.txt - 第三方代碼使用協(xié)議。

? - legal.txt - 法律和版權(quán)信息。

? - release_note.txt - Release信息。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-e9KDImBu-1690534369668)(./pics/folder.png)]

用 JavaScript 構(gòu)建 Web PDF 閱讀器

這里將通過(guò)逐步說(shuō)明的方式，幫助您快速開(kāi)始使用 ComPDFKit PDF SDK for Web 在 Javascript 中制作 Web 應(yīng)用程序。通過(guò)以下步驟，您將獲得一個(gè)可以顯示指定 PDF 文件內(nèi)容的簡(jiǎn)單 Web 應(yīng)用程序。

第一步：添加 ComPDFKit PDF SDK 包

1. 將 @compdfkit 文件夾添加到項(xiàng)目的 根 目錄或 assets 目錄下的 lib 目錄中。這將作為 ComPDFKit PDF SDK for Web 的入文件，并將它導(dǎo)入到您的項(xiàng)目中。

2. 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.

3. 將包含運(yùn)行 ComPDFKit PDF SDK for Web 所需的靜態(tài)資源文件的 webviewer 文件夾添加到項(xiàng)目的靜態(tài)資源文件夾中。

第二部：顯示PDF文檔

1. 將 @compdfkit 文件夾中的 webviewer.js 文件導(dǎo)入到您的項(xiàng)目中。

2. 調(diào)用 ComPDFKitViewer.init() 在您的項(xiàng)目中初始化 ComPDFKit Web Viewer。

3. 將要顯示的 PDF 地址和許可證密鑰傳遞給 init 函數(shù)

// 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');
})

4. 項(xiàng)目運(yùn)行后，您就可以看到要顯示的 PDF 文件了。

故障排除

如果您在集成ComPDFKit PDF SDK for Web 時(shí)遇到問(wèn)題，請(qǐng)隨時(shí)聯(lián)系ComPDFKit 團(tuán)隊(duì)。