控制PDF線上體驗並收集分析

最後更新： 2026年1月15日

主題：
PDF Embed API

建立對象：

Intermediate
Developer

您的組織是否在您的網站上發佈PDF? 瞭解如何使用Adobe PDF嵌入API控制外觀、啟用協作並收集有關用戶與PDF交互方式的分析，包括在頁面上花費的時間和搜索。若要開始此4部分的操作教程，請選擇使用PDF嵌入API入門。

第1部分：PDF嵌入API入門

第2部分：將PDF嵌入API添加到網頁

第3部分：訪問分析API

第4部分：添加基於事件的交互性

第1部分：PDF嵌入API入門 part1

在第1部分，瞭解如何開始使用第1至3部分所需的一切。您將從獲取API憑據開始。

您需要的內容

教程資源下載
Adobe ID在此處獲取一個
Web伺服器（節點JS、PHP等）
HTML/JavaScript/CSS的工作知識

我們使用的內容

基本Web伺服器（節點）
Visual Studio代碼
GitHub

正在獲取憑據

轉到Adobe.io網站。
按一下「生成參與文檔體驗」下的「瞭解更多資訊」。

這將帶您進入Adobe Acrobat Services首頁。
在導航欄中按一下開始。

在 使用Acrobat Services個API開始 到 建立新憑據 或 管理現有憑據 中，您將看到一個選項。
按一下 新建憑據 下的開始按鈕。

選擇 PDF嵌入API 單選按鈕，並在下一個窗口中添加您選擇的憑據名稱和應用程式域。

note
NOTE
這些憑據只能用於此處列出的應用程式域。您可以使用您選擇的任何域。

憑據螢幕快照

按一下建立憑據。

嚮導的最後一頁為您提供了客戶端憑據詳細資訊。保持此窗口開啟，以便您可以返回到該窗口並複製客戶端ID（API密鑰）以供以後使用。
按一下 查看文檔 以轉到文檔，其中包含有關如何使用此API的詳細資訊。

第2部分：將PDF嵌入API添加到網頁 part2

在第2部分，您將學習如何輕鬆將PDF嵌入API嵌入到網頁中。您將使用Adobe PDF嵌入API線上演示建立我們的代碼來執行此操作。

獲取練習代碼

我們為您建立了代碼。雖然您可以使用自己的代碼，但演示將位於教程資源的上下文中。在此處下載示例代碼🔗。

轉到Adobe Acrobat Services 網站。
在導航欄中按一下API，然後轉到下拉連結中的 PDF嵌入API 頁。
按一下嘗試演示。

隨PDF嵌入API的開發人員沙盒彈出一個新窗口。

在這裡，您可以看到不同查看模式的選項。
按一下「全窗口」(Full Window)、「尺寸容器」(Signed Container)、「線上」(In-Line)和「燈箱」(Lightbox)的不同查看模式。
按一下 全窗口 查看模式，然後按一下 自定義 按鈕以開啟和關閉選項。
禁用下載 PDF選項。
按一下 生成代碼 按鈕以查看代碼預覽。
從第1部分的「客戶端憑據」窗口複製客戶端ID。
在代碼編輯器中開啟Web -> 資源 -> js -> dc-config.js檔案。

您將看到clientID變數在其中。
將客戶端憑據貼上到雙引號之間，以將clientID設定為憑據。
返回到開發人員沙盒代碼預覽。

複製具有Adobe指令碼的第二行：

code language-none
`<script src=https://documentccloud.adobe.com/view-sdk/main.js></script>`

指令碼螢幕快照

轉到代碼編輯器並開啟Web -> 練習 -> index.html檔案。
將指令碼代碼貼上到檔案的<head>中的注釋下，該注釋標籤為： TODO: EXERCISE 1: INSERT EMBED API指令碼標籤。

返回到開發人員沙盒代碼預覽並複製第一行代碼，該代碼具有：

code language-none
`<div id="adobe-dc-view"></div>`

要複製代碼的位置螢幕快照

轉到代碼編輯器，然後再次開啟Web -> 練習 -> index.html檔案。
將<div>代碼貼上到檔案的<body>中，檔案的 TODO: EXERCISE 1: INSERTPDFEMBED API CODE 下面。

返回到開發人員沙盒代碼預覽並複製下面<script>的代碼行：

code language-none

code language-none
`<script type="text/javascript"> document.addEventListener("adobe_dc_view_sdk.ready", function(){ var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"}); adobeDCView.previewFile({ content:{location: {url: "https://documentcloud. adobe.com/view-sdk-demo/PDFs/Bodea Brochure. pdf"}}, metaData:{fileName: "Bodea Brochure.pdf"} }, {showDownloadPDF: false}); }); </script>`

<script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready",             function(){
        var adobeDCView = new AdobeDC.View({clientId:                     "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
        adobeDCView.previewFile({
            content:{location: {url: "https://documentcloud.                adobe.com/view-sdk-demo/PDFs/Bodea Brochure.                    pdf"}},
            metaData:{fileName: "Bodea Brochure.pdf"}
        }, {showDownloadPDF: false});
    });
</script>

轉到代碼編輯器，然後再次開啟Web -> 練習 -> index.html檔案。
將<script>代碼貼上到<body>標籤下第68行檔案的<div>中。
修改相同 index.html 檔案的第70行，以包括以前建立的clientID變數。
修改相同 index.html 檔案的第72行，以更新PDF檔案的位置以使用本地檔案。

/resources/pdfs/whitepaper.pdf中的教程檔案中提供了一個。
通過瀏覽 <your domain>/summit21/web/exercise/ 來保存已修改的檔案並預覽網站。

您應在瀏覽器中以「全窗口」模式查看「技術白皮書」呈現。

第3部分：訪問分析API part3

現在，您已成功建立了具有PDF嵌入API呈現PDF的網頁，在第3部分，您現在可以探討如何使用JavaScript事件度量分析，以瞭解用戶如何使用PDF。

查找文檔

作為PDF嵌入API的一部分，有許多不同的JavaScript事件可用。您可以從Adobe Acrobat Services文檔訪問它們。

導航到文檔站點。
查看作為API一部分可用的不同事件類型。這些對於參考很有幫助，並且對您的未來項目也有幫助。

複製網站上列出的示例代碼。

將此作為代碼的基礎並對其進行修改。

要複製示例代碼的位置螢幕快照

code language-none

code language-none
`const eventOptions = { //Pass the PDF analytics events to receive. //If no event is passed in listenOn, then all PDF analytics events will be received. listenOn: [ AdobeDC.View.Enum.PDFAnalyticsEvents. PAGE_VIEW, AdobeDC.View.Enum.PDFAnalyticsEvents.DOCUMENT_DOWNLOAD], enablePDFAnalytics: true } adobeDCView.registerCallback( AdobeDC.View.Enum.CallbackType.EVENT_LISTENER, function(event) { console.log("Type " + event.type); console.log("Data " + event.data); }, eventOptions );`

const eventOptions = {
  //Pass the PDF analytics events to receive.
   //If no event is passed in listenOn, then all PDF         analytics events will be received.
listenOn: [ AdobeDC.View.Enum.PDFAnalyticsEvents.    PAGE_VIEW, AdobeDC.View.Enum.PDFAnalyticsEvents.DOCUMENT_DOWNLOAD],
  enablePDFAnalytics: true
}


adobeDCView.registerCallback(
  AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
  function(event) {
    console.log("Type " + event.type);
    console.log("Data " + event.data);
  }, eventOptions
);