Quickstarts

The Document Cloud View SDK allows you to embed a PDF viewer in your web applications with only a few lines of code. With options for controlling how a PDF appears and functions, your applications can deliver the rich and compelling digital document experiences to your customers expect and need.

Easy-to-use, JavaScript-based interfaces are the View SDK’s foundation. Simplicity is designed in so that developers can harness the power of integrated PDF in their web content. With the ability to natively display PDF in an environment you control, you no longer need to rely on Reader download buttons, 3rd party apps, and PDF viewers that care little for PDF standards. With web-based JavaScript and in-page JS options, displaying a PDF on the web couldn’t be easier. And it’s simple: a few of lines of code are all you need to get started.

Tip

Check out the online demo, and view the code to see how easy it is!

Getting credentials

You’ll need a client ID to use the DC View SDK. To get one, click HERE, and complete the workflow.

Copy it. Run it.

The quickest way to get up and running is to copy the code below and run it locally. Simply copy the code to an index.html file, and open it in a browser. The example already points to an online PDF, and you do not need a client ID to run the viewer on your machine.

There really are no environment setup steps or system requirements. Develop your web app using your preferred methods and tools.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--Get the samples from https://www.adobe.com/go/dcviewsdk_samples-->
<!DOCTYPE html>
<html>
<head>
 <title>Adobe Document Cloud View SDK Sample</title>
 <meta charset="utf-8"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body style="margin: 0px">
 <div id="adobe-dc-view"></div>
 <script src=https://documentcloud.adobe.com/view-sdk/main.js"></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"}
       });
    });
 </script>
</body>
</html>

Run ready samples

The View SDK provides ready-to-run sample files for every feature.

  1. Download the samples repo.
  2. Place the files in any location that has internet access.
  3. Navigate to the index.html file for any sample, and open it in a browser.

If a PDF renders in the web viewer, the sample has correctly executed.

Note

You do not need a client ID to run the samples locally.

Live demo

The DC View SDK demo demonstrates how easy it is to configure the viewer and also provides a “generate code” button so that you can immediately see your UI changes reflected in a live code sample.

_images/playground.png

Mobile support

Much of what the View SDK delivers is supported in the mobile devices. However, there are some limitations:

  • Annotation tools are not supported on phones in Full Window embed mode. These tools are supported on tablets (both Android and iOS).
  • Print functionality is unsupported.
  • PDF download is unsupported on iOS devices, but it is supported on Android.

Feedback and forum

Customer feedback is particularly valuable as it helps the team validate use cases, guide development, and troubleshoot issues. Comments and questions are always welcome on the Community Forum.