• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

PDF Embed API in VueJS

New Here ,
Aug 26, 2020 Aug 26, 2020

Copy link to clipboard

Copied

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

Views

4.2K

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 26, 2020 Aug 26, 2020

Copy link to clipboard

Copied

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. 

Votes

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 ,
Sep 05, 2020 Sep 05, 2020

Copy link to clipboard

Copied

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.

Votes

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
New Here ,
Dec 19, 2021 Dec 19, 2021

Copy link to clipboard

Copied

Hello,

Can you share your implementation please?

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

 

Thank you.

Votes

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 ,
Dec 20, 2021 Dec 20, 2021

Copy link to clipboard

Copied

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

Votes

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
Adobe Employee ,
Dec 20, 2021 Dec 20, 2021

Copy link to clipboard

Copied

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.

Votes

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
New Here ,
Dec 27, 2021 Dec 27, 2021

Copy link to clipboard

Copied

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

Votes

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
New Here ,
Dec 27, 2021 Dec 27, 2021

Copy link to clipboard

Copied

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

 

Votes

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
New Here ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

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.

Votes

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
Adobe Employee ,
Jan 04, 2022 Jan 04, 2022

Copy link to clipboard

Copied

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.

Votes

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
Adobe Employee ,
Jan 04, 2022 Jan 04, 2022

Copy link to clipboard

Copied

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());
}

 

Votes

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
New Here ,
Aug 24, 2022 Aug 24, 2022

Copy link to clipboard

Copied

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

Any ideas why?

Votes

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
Adobe Employee ,
Aug 24, 2022 Aug 24, 2022

Copy link to clipboard

Copied

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

Votes

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
New Here ,
Aug 24, 2022 Aug 24, 2022

Copy link to clipboard

Copied

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.

Votes

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
Adobe Employee ,
Aug 24, 2022 Aug 24, 2022

Copy link to clipboard

Copied

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

Votes

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
New Here ,
Mar 14, 2023 Mar 14, 2023

Copy link to clipboard

Copied

LATEST

@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~!

Votes

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