Embedding more than one PDF div on a page

Community Beginner ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

I am using the pdf embed api code to add divs to a page that will show the PDF inline. However, when I have more than one PDF, it doesn't seem to work. It only shows the second one. Any idea on how I can embed two different frames on my page?

Views

254

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Community Expert , Aug 21, 2020 Aug 21, 2020

Take a look at this CodePen for a working example. You just need to create two different AdobeDC.View objects and be sure to use an embed mode that doesn't take over the entire browser window.

Likes

Translate

Translate
Community Beginner , Aug 21, 2020 Aug 21, 2020

Answering this after resolving it, we simply change the name of the two divs as well as the div reference within the script, and this will allow for more than one PDF to be shown.

 

<div id="adobe-dc-view1" style="width: 100%;"></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: "9dcefe93a0974e39bde91432083cffec", divId: "ado
...

Likes

Translate

Translate
Community Expert ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

Take a look at this CodePen for a working example. You just need to create two different AdobeDC.View objects and be sure to use an embed mode that doesn't take over the entire browser window.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

Thanks for your reply. I appreciate your example, my code is using the embed code from the api tool. Below you can see how I have two divs in a row... this is only showing the second file. How would this be edited to match what you are suggesting? 

 

<div id="adobe-dc-view" style="width: 100%;"></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: "9dcefe93a0974e39bde91432083cffec", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://file.org/pdf"}},
			metaData:{fileName: "Bodea Brochure.pdf"}
		}, {embedMode: "IN_LINE"});
	});
</script>

<div id="adobe-dc-view" style="width: 100%;"></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: "9dcefe93a0974e39bde91432083cffec", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://file.org/pdf2"}},
			metaData:{fileName: "second file.pdf"}
		}, {embedMode: "IN_LINE"});
	});
</script>

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

Answering this after resolving it, we simply change the name of the two divs as well as the div reference within the script, and this will allow for more than one PDF to be shown.

 

<div id="adobe-dc-view1" style="width: 100%;"></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: "9dcefe93a0974e39bde91432083cffec", divId: "adobe-dc-view1"});
		adobeDCView.previewFile({
			content:{location: {url: "https://file.org/pdf"}},
			metaData:{fileName: "Bodea Brochure.pdf"}
		}, {embedMode: "IN_LINE"});
	});
</script>

<div id="adobe-dc-view2" style="width: 100%;"></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: "9dcefe93a0974e39bde91432083cffec", divId: "adobe-dc-view2"});
		adobeDCView.previewFile({
			content:{location: {url: "https://file.org/pdf2"}},
			metaData:{fileName: "second file.pdf"}
		}, {embedMode: "IN_LINE"});
	});
</script>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

Glad you go there first. I'm very curious to see what you are doing with Embed API. If you don't want to share broadly in the forum, you can message me directly.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

Thanks for your reply. Actually I'm working now on a simple page that would
expand the lightbox button to show a PDF. We are a non-profit working in
the area of urban planning and preservation. I have to share 5-6 PDF
documents on a page and wanted to experiment with different options, so I
found the embed code and tried to play around with it.

On that note, I am trying now the Lightbox version... I took your codepen
on buttons connected to lightbox. For some reason it's not working on my
page:

https://mdpl.org/2020/08/21/ocean-drive-master-plans/

If you click the button nothing happens, and I get an error on the console.

Here's my code (adapted from yours..). I put it in a wordpress block.





Read the Full Plan

//

If you have any advice I would greatly appreciate it.

Thank you,
Daniel

Thank you,
Daniel

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

LATEST

The error is that the clientId has already been declared. You only need to declare it once, not for every button.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources