PDF Viewer plugin

jcalvarezjr · 2021-03-15T18:36:04.544Z

@Diego this worked like magic, thanks for sharing!

jcalvarezjr · 2021-03-15T19:48:31.464Z

@Diego how did you implement yours? I have it setup where based on a button click a popup will appear and open the adobe Lightbox option, but when I click close on the adobe embed, I can’t reopen it when I click the original button to open the popup.

Edit: meaning the PDF will render just once and will never render again if I close the adobe embed

Edit2: Nvm full page in a popup works as it should, I abandoned the Lightbox option

Diego · 2021-03-15T20:40:12.529Z

@jcalvarezjr , indeed the lightbox option is quite tricky. The best option, as you mention is to use the full page option. And use a button to close the pop-up instead of the button of the pdf container. If you want to make it full screen (something similar to the lightbox option), just add another piece of html inside the pop-up:

div#fullwidthpopup , div#pdfpopup { width: 100% !important; height: 100% !important; position: fixed !important; top: 0 !important; left: 0 !important; margin-left: 0 !important; } div.fullwidthpopup .bubble-r-box , div.fullwidthpopup .RepeatingGroup, div.fullwidthpopup .HTML { width: 100% !important; height: 100% !important; }

and set the ID attribute of the pop-up and the pdf html to “pdfpopup” (as you can see in the code above)

Hope it helps!

J.M · 2021-08-03T23:24:15.978Z

Hi Diego, We are trying to make the PDF API work but cannot figure this out, we been researching and trying over and over and nothings works. Could you please point us in the right direction since you’ve successfully implemented it. Much appreciate any help you can provide. Many thanks!

manikandan · 2021-08-04T04:10:19.711Z

Hi @pierre.tillement

When i look your bug is not related to plugin. Im the actual plugin develop of this pdf viewer plugin.
May i know the exact issue or share your app editor link? Will check and fix your issue.

privatelending · 2021-08-04T07:47:49.475Z

Hey @manikandan

I had figured out the issue and need to update the plugin’s version. It works like a charm now. Thanks a lot

manikandan · 2021-08-04T07:51:51.994Z

Great to hear Anything need on this plugin please let us know

viswas · 2021-09-22T13:34:24.792Z

Hi @manikandan , I am running into an error when I have different PDFs where some are landscape and others are portrait oriented. When I go from viewing a landscape oriented pdf to a portrait one (or vice versa) the viewer gets stuck and takes infinite time to load and I have to refresh my page to view the other document. Any ideas on how to fix that?

another · 2022-02-01T14:45:47.532Z

Adobe PDF Embed API

jayshankarpure · 2022-08-09T07:09:23.372Z

Hey @another @Diego i am trying to implement Adobe PDF Embed . Though facing this error ,

My html element code is something like this . When i try it with sample pdf it works magically though when i try it with my data it doesn’t work . Plz help

image1905×902 110 KB

image1887×842 14.4 KB

image1912×910 60.1 KB

I am trying with this url - https://archives.nseindia.com/corporate/SALZERELEC_09082022114021_ResultUpdatePresentationQ1FY23.pdf

another · 2022-08-09T14:59:24.395Z

Hi Good question!

Usually this plug-in reads .pdf files, not example a .ppt file.

My experience with the plug-in that I either Search for (material) in my data base, while using slug name to locate the data field, and then file type of data should be there, a pdf.

In some cases I use direct (s3) link of the pdf, which you can find by going to the data field where is the pdf file, opening the field, and opening the .pdf by pressing the “See” button just next the folder, then you copy URL and paste the URL in the HMTL of the plug-in.

Btw. now I have again looked at your photo, no1, try to have something like this.

example232552

Hope this helps! Let me know if there is something else!

honara.io · 2023-03-24T23:44:08.693Z

Hello,
I have this error when incorporating. But I can not register the domain with https://sciread.bubbleapps.io only scirad.bubble.io and receive this error.
Can you help me?

Captura de tela 2023-03-24 204142713×502 11.7 KB

another · 2023-03-25T06:19:03.176Z

Hi,

I have been there, tried out over 3-4 different plugins on the Bubble to read the pdf, the last solution that i am currently in, is the PDF viewer.

example12515125

Try out

UPDATE: Pdf Viewer is not reliable as well. With recent update from Bubble side, the plugin has major issues, and it seems to be quite unstable solution in the last few days.

Ps. Searching now for a pdf reader, and it seems so far to go again with Adobe.

honara.io · 2023-03-28T12:28:37.533Z

I currently use this one, but I need a reader with more features. I saw that my problem is CORS

dr.sumit.periwal · 2023-12-05T21:35:18.318Z

I am trying to use the Adobe PDF API to view pdf. The viewer and the PDF flash for a second and then disappear. I am unable to understand why. Please help.

nebg · 2024-01-05T11:04:11.867Z

Bump, I have the same problem.

dr.sumit.periwal · 2024-01-05T18:08:55.971Z

I thought I was making some mistake, But if you are facing the same issue, it might be some bubble working issue.

nebg · 2024-01-05T21:04:50.146Z

I have solved it now! And it was a stupid mistake, just that I had not swapped out the client ID in the template from a placeholder to my own.

dr.sumit.periwal · 2024-01-06T10:58:54.982Z

But I have put my own client ID. Could you show me your implementation how you have put it in the HTML element.

nebg · 2024-01-12T09:16:50.274Z

Here is the full implementation, all this just pasted into the HTML element.

<html>
<head>
 <title>CV Preview</title>
 <meta charset="utf-8"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body style="margin: 0px">
 <div id="adobe-dc-view"></div>
 <script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
 <script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function()
    {
        var adobeDCView = new AdobeDC.View({clientId: "**YOUR_CLIENT_ID_HERE**", divId: "adobe-dc-view"});
        adobeDCView.previewFile(
       {
          content:   {location: {url: "**YOUR_URL_HERE**"}},
          metaData: {fileName: "**YOUR_FILE_NAME_HERE**", hasReadOnlyAccess: "True"}
       });
    });
 </script>
</body>