Embedding PDF Files

Estimated reading: 2 minutes 276 views

Click to View Examples of the Different Layouts

 

Full Window

<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: "8049c0dbf648467d9abbdcd54d4f89ff", 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>

 

Sized Container
The height and width values can be modified to change the size of the container.

<div id="adobe-dc-view" style="height: 360px; width: 500px;"></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: "8049c0dbf648467d9abbdcd54d4f89ff", 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"}
}, {embedMode: "SIZED_CONTAINER"});
});
</script>

 

Inline

The width value can be modified to change the size of the container.

<div id="adobe-dc-view" style="width: 800px;"></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: "8049c0dbf648467d9abbdcd54d4f89ff", 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"}
}, {embedMode: "IN_LINE"});
});
</script>

 

 

Light Box

<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: "8049c0dbf648467d9abbdcd54d4f89ff"});
adobeDCView.previewFile({
content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
metaData:{fileName: "Bodea Brochure.pdf"}
}, {embedMode: "LIGHT_BOX"});
});
</script>

Share this Doc

Embedding PDF Files

Or copy link

Contents

Accessibility

Some information in this article is from the W3C Web Accessibility Initiative (W

Advanced Topics

The Easiest Way to Update Your Documents

(1) Go to Media (by clicking Media on the menu) and then (2) search for the name

Temp Pages and Permalinks

Utilizing the drafts feature should prevent any need for creating place holder p

Tools for Getting your Message Out

There is a lot of conflicting information making the rounds on what can and can&

How to Create a Twitter App

Sign in with your Twitter Account Make sure you’re logged in with the Twit

School Website Checklist

Validation Checklist

Validating a website is the process of ensuring that the pages on the website co

Replacing Files

Our wordpress installations come with many custom features, one of which include

Create a Facebook App

The best way to create an app on Facebook is to make samanthadotnet an administr

CAPS and Underlines

ON THE INTERNET, ALL CAPS IS CONSIDERED “YELLING”.

Smashing’s Content Strategy & Storytelling

Chat Icon Close Icon