PDF Embed API in VueJS

[Philipp5ECD]

Hi everyone,

we're planning to integrate the pdf embed API in our VueJS App. Does anyone have experience in how to Setup or Use it in Vue? 
Unfortunately I didnt find any related articles for that.

Thanks for your help

[Joel Geraci]

I don't have any direct experience with VueJS (yet) but it looks like it would be fairly simple to create a Vue component that implements Embed API. 

[YorickdeVries]

I am using the PDF embed API with Vue.js. Feel free to send me a message so I can share my implementation with you.

[Alexandru223051475260]

Hello,

Can you share your implementation please?

I can't figure out a way to work as a Vue component.

Thank you.

[YorickdeVries]

Certainly! Please send your emailadress in a DM and then I can send it to you.

[Raymond Camden]

Hi! I've done many examples of Embed + Vue. Here's my first example: https://www.raymondcamden.com/2021/02/17/using-the-pdf-embed-api-with-vuejs

If I can help more, let me know.

[Carriane22239957dnji]

Hi there! Is there any way to use this api in Vue 3?

[Alexandru223051475260]

Yes you can, I attached a sample.

https://gist.github.com/AlexandruMiricioiu/0ac17faf92e5dd72eabdae21bdbbe4a2

Don't forget to include the script in your index.html

https://documentcloud.adobe.com/view-sdk/main.js

[Carriane22239957dnji]

Thank you very much! I've been working on this for quite a while now. This is a big help. I thought the api is not compatible with Vue 3.

[Raymond Camden]

Just curious - was there anything specific in our docs or samples that led you to think Vue3 wouldn't work? If there, it's something we could address. Glad you got it working.

[Raymond Camden]

Hi, a quick note about your code. In mounted, you add an event listener for adobe_dc_view_sdk.ready, but you should not that sometimes - especially in a Vue app, the event will have already fired. I typically use code like this:

if(window.AdobeDC) displayPDF();
else {
	document.addEventListener("adobe_dc_view_sdk.ready", () => displayPDF());
}

[chrisl30183636]

I'm getting an error: 'AdobeDC' is not defined. When I try and use the code from the GitHub file above.

Any ideas why?

[Raymond Camden]

What code? Mine on my blog? The gist from the non-Adobe person?

[chrisl30183636]

The Gist but I was able to get it to work, but I get another error when the pdf viewer loads "This application domain (http://localhost:8080) is not authorized to use the provided PDF Embed API Client ID." When I try and set up a client Id I can't use a localhost as the web address, so I'm really confused at whats going on.

[Raymond Camden]

When you create a credential, you absolutely can use localhost. Can you share a screenshot of where you are blocked from doing so?

[Jason Sun embed]

@Raymond Camden 

First thank you for your awesome blog- https://www.raymondcamden.com/2021/02/17/using-the-pdf-embed-api-with-vuejs.

I have a follow up question, I have a scenario to initiate a pdf viewer and it need to reload different pdf based on api returned pdf url/ content. when change pdf or reload pdf, an error would throw up(ref to screenshot).

I tried your code from codepen - https://codepen.io/cfjedimaster/pen/QWGvZed, same error when 2nd time to select antoher pdf from local.

Can you please help in here ? Thanks~!