Skip to main content
D
danielc36355721
Inspiring
August 21, 2020
Answered

Embedding more than one PDF div on a page

  • August 21, 2020
  • 1 reply
  • 1418 views

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?

      This topic has been closed for replies.
      Correct answer danielc36355721

      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>

      1 reply

      Joel Geraci
      Community Expert
      Joel GeraciCommunity Expert
      Community Expert
      August 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.

      D
      danielc36355721Author
      Inspiring
      August 21, 2020

      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>

       

      D
      danielc36355721AuthorCorrect answer
      Inspiring
      August 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: "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>
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices