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?
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.
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
...
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.
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>
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>
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.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
The error is that the clientId has already been declared. You only need to declare it once, not for every button.