控制您的PDF在线体验并收集分析

Last update: Fri Jul 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

中级
开发人员

您的组织是否会将PDF发布在您的网站上？了解如何使用Adobe PDF Embed API控制外观、启用协作以及收集有关用户如何与PDF交互的分析（包括花费在页面和搜索上的时间）。要开始学习这个4部分实际操作教程，请选择 PDFEmbed API入门。

第1部分：PDFEmbed API入门

第2部分：将PDFEmbed API添加到网页

第3部分：访问分析API

第4部分：根据事件添加交互性

第1部分：PDFEmbed 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
NOTE
这些凭据只能在此列出的应用程序域中使用。您可以使用您选择的任何域。

凭据的屏幕截图

单击 创建凭据。

向导的最后一页为您提供了客户端凭据详细信息。将此窗口保持打开状态，以便您可以返回此窗口并复制客户端ID（API密钥）供以后使用。
单击 查看文档 以转到包含有关如何使用此API的详细信息的文档。

第2部分：将PDFEmbed API添加到网页 part2

在第2部分中，您将了解如何轻松地将PDFEmbed API嵌入到网页中。为此，您将使用Adobe PDF Embed API在线演示创建我们的代码。

获取练习代码

我们创建了代码供您使用。虽然您可以使用自己的代码，但演示将在教程资源的上下文中进行。在此处下载示例代码。

转到Adobe Acrobat Services 网站。
在导航栏中单击 API，然后转到下拉链接中的 PDF嵌入API 页面。
单击 尝试演示。

此时会弹出一个新窗口，其中包含PDFEmbed API的开发人员沙盒。

您可以在此处查看不同查看模式的选项。
单击“Full Window”（全窗口）、“Sized Container”（容器大小）、“In-Line”（行中）和“Lightbox”（灯箱）的不同查看模式。
单击 全窗口 查看模式，然后单击 自定义 按钮以打开和关闭选项。
禁用下载 PDF选项。
单击“生成代码”按钮查看代码预览。
从第1部分的“客户端凭据”窗口中复制 客户端ID。
在您的代码编辑器中打开 Web -> 资源 -> js -> dc-config.js 文件。

可以看到客户端ID变量存在。
在双引号之间粘贴您的客户端凭据，以将clientID设置为您的凭据。
返回到开发人员沙箱代码预览。

复制具有Adobe脚本的第二行：

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

脚本的屏幕截图

转到代码编辑器并打开 Web -> 练习 -> index.html 文件。
将脚本代码粘贴到第18行文件的<head>中，注释下方写有： TODO：练习1：插入EMBED API脚本标记。

返回到开发人员沙箱代码预览，并复制具有以下项的第一行代码：

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

复制代码位置的屏幕截图

转到代码编辑器并再次打开 Web -> 练习 -> index.html 文件。
将<div>代码粘贴到第67行文件<body>的 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>

转到代码编辑器并再次打开 Web -> 练习 -> index.html 文件。
将<script>代码粘贴到第68行文件<body>的<div>标记下。
修改同一 index.html 文件的第70行，以包含以前创建的clientID变量。
修改同一 index.html 文件的第72行，以更新PDF文件的位置以使用本地文件。

/resources/pdfs/whitepaper.pdf 的教程文件中有一个可用。
保存修改后的文件并通过浏览到 <your domain>/summit21/web/exercise/ 来预览网站。

您应在浏览器中看到以全窗口模式渲染的技术白皮书。

第3部分：访问分析API part3

现在，您已成功创建了一个具有PDFEmbed API渲染PDF的网页，在第3部分中，您现在可以探索如何使用JavaScript事件来测量分析，以了解用户如何使用PDF。

查找文档

作为PDFEmbed 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
);