掌控您的 PDF 線上體驗並蒐集分析數據

最後更新： 2026年1月15日

主題：
PDF Embed API

建立對象：

Intermediate
Developer

你們組織會在網站上發布 PDF 嗎？學習如何使用 Adobe PDF 嵌入 API，來控制外觀、促進協作，並收集使用者如何與 PDF 互動的分析數據，包括在頁面上的停留時間和搜尋結果。要開始這個四部分的實作教學，請選擇 「開始使用 PDF 嵌入 API」。

第一部分：開始使用 PDF 嵌入 API

第二部分：將 PDF 嵌入 API 加入網頁

第三部分：存取分析 API

第四部分：根據事件增加互動性

第一部分：開始使用 PDF 嵌入 API part1

在第一部分，學習如何開始準備第一到第三部分所需的一切。你會從取得 API 憑證開始。

你需要什麼

教學資源下載
Adobe ID 在這裡取得
網頁伺服器（Node JS、PHP 等）
具備 HTML / JavaScript / CSS 的基本知識

我們正在使用什麼

一個基本的網頁伺服器（Node）
Visual Studio 程式碼
GitHub

取得資格認證

請前往 Adobe.io 官網。
點擊 「建立引人入勝的文件體驗中的了解更多 」。

這會帶你到 Adobe Acrobat Services 首頁。
在導航欄點擊 「開始 使用」。

你會在 「開始使用 Acrobat Services API」 中看到一個選項，可以建立 新的憑證 或 管理現有憑證。
點擊「建立新憑證」下的「開始」按鈕。

選擇 PDF 嵌入 API 單選按鈕，並在下一個視窗新增你選擇的憑證名稱和應用程式網域。

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

憑證截圖

點擊 建立憑證。

嚮導的最後一頁會提供你的客戶憑證資訊。請保持這個視窗開啟，這樣你就可以回來複製客戶端 ID（API 金鑰）以便日後使用。
點擊 「檢視文件 」即可前往詳細說明如何使用此 API 的文件。

第二部分：將 PDF 嵌入 API 加入網頁 part2

在第二部分，你將學習如何輕鬆地將 PDF Embed API 嵌入網頁。你將透過使用 Adobe PDF 嵌入 API 線上示範來建立我們的程式碼來完成這件事。

取得運動代碼

我們為你創建了程式碼供你使用。雖然你可以使用自己的程式碼，但示範會在教學資源的脈絡中進行。請在此🔗下載範例程式碼。

前往 Adobe Acrobat Services 網站。
在導覽欄點選 API ，然後在下拉連結中前往 PDF 嵌入 API 頁面。
點擊 「試用試玩版」。

會跳出一個新視窗，顯示 PDF 嵌入 API 的開發者沙盒。

這裡可以看到不同觀看模式的選項。
點選不同的觀賞模式，分別是全視窗、尺寸容器、線上和Lightbox。
點選 「全視窗 觀看模式」，然後點擊 「自訂 」按鈕來切換選項的開關。
關閉下載 PDF 選項。
點擊 「產生程式碼 」按鈕可查看程式碼預覽。
從第一部分的客戶憑證視窗複製 客戶 ID 。
在你的程式碼編輯器中開啟 Web -> resources -> 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> 第 18 行檔案的註解下，註解內容為： TODO： EXERCISE 1：插入 EMBED API SCRIPT TAG。

回到開發者沙盒程式碼預覽，複製第一行包含：

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

截圖顯示程式碼要複製哪裡

回到你的程式碼編輯器，再次打開網頁 -> 練習 -> index.html 檔案。
將程式碼貼 <div> 到 <body> 檔案第 67 行註解 下的 TODO：練習 1：插入 PDF 嵌入 API 程式碼。

回到開發者沙盒程式碼預覽，複製以下程式碼行數：<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>

回到你的程式碼編輯器，再次打開網頁 -> 練習 -> index.html 檔案。
把程式碼貼 <script> 到檔案的 in 中 <body> ，在第 68 行的標籤下 <div> 。
修改同一 index.html 檔案的第 70 行，加入先前建立的 clientID 變數。
修改同一 index.html 檔案的第 72 行，以更新 PDF 檔案的位置，以使用本地檔案。

教學檔 裡有 /resources/pdfs/whitepaper.pdf 裡有一份。
儲存修改過的檔案，並瀏覽 <your domain>/summit21/web/exercise/ 預覽你的網站。

你應該會在瀏覽器中看到技術白皮書以全視窗模式呈現。

第三部分：存取分析 API part3

現在你已經成功建立一個包含 PDF 嵌入 API 呈現 PDF 的網頁，在第三部分你可以探索如何利用 JavaScript 事件來衡量分析，了解使用者如何使用 PDF。

尋找文件

PDF Embed 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
);