PDF Embed API: Multiple embeds on the same page

[Tech5EDE]

Hi!

I'm using the PDF Embed API with React. And it's working perfectly when I only have embed on the page. But when I try to add another one on the page I get this error in my network tab.

I'm using the Full Window mode if that helps.

Are there any suggested ways I can solve this issue? 

Thank you in advance,

[Tech5EDE]

Sorry, I realize that the image is way too small.

[Joel Geraci · Accepted solution]

You'll need to use two different variables for the DC View object and then it will work.

[abdulw34823249]

the same issue is with me, can u please provide me the source code

[RishiUttamHK]

I am able to render multiple embeded pdfs on a single page using IN_LINE embed method, just mounting them on different div ids.  

I admit that i am not sure if this is causing some problems as the pdf's don't render all the time, sometimes reaching 100% and failing with nothing in the UI that would say so.

I am using Vue whih has a data object and a variable called adobeDCView.

@Joel3 Do you recommned that we create a new adobeDCView for each embed on the same page?

this.adobeDCView = new AdobeDC.View({
clientId: process.env.VUE_APP_PDF_KEY,
divId: `pdf-view-${index}`,
});

this.adobeDCView.previewFile(
{
content: { location: { url: item.url } },
metaData: { fileName: item.fileName },
},
{
embedMode: "IN_LINE",
showDownloadPDF: false,
showAnnotationTools: true,
enableLinearization: true,
}
);

[RishiUttamHK]

Can we  use the same adobeDCView.preview file instance and use different divId names?  Or is the way suggested above is to create completely new instances of adobeDCView for each pdf.. 

[Raymond Camden]

As the result of AdobeDC.View is tied to a div, you should normally just use 2 instances. Here is a CodePen showing it: https://codepen.io/cfjedimaster/pen/ZEgGvor