Need PDF Viewer

Hi guys,

So I need to show some PDF presentation on one of the pages but how should i do it?
I tried to use some plugins but i can`t remove Download / Print / Search topbar /Right Toggle etc.

My method is to drop the code below into an HTML element.

This uses Adobe’s own JS framework. I use this because I normally need to get the total number of pages and the reader’s current page which this approach handles quite easily.

There are quite a few ways to customise the below - documentation is here - including, I think, all the things you mention in your post.

You need to change three things in the below for it to work:

  1. You need to create credentials for the Embed PDF API at Adobe here

  2. You need to add the URL to your PDF. You will want to do this dynamically via a Bubble expression.

  3. As above but for the name of your PDF.

     <body style="margin: 0px">
           <div id="adobe-dc-view"></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: "***YOU CREATE THIS AT https://console.adobe.io***", divId: "adobe-dc-view"});
                          var previewFilePromise = adobeDCView.previewFile({
                             content:   {location: {url: "***PUT THE URL OF YOUR PDF IN HERE***"}},
                             metaData:  {fileName: "***PUT THE NAME OF YOUR FILE IN HERE***"}
                           },{showAnnotationTools: false, showLeftHandPanel: false, showPageControls: false}
                                                                          );
                   previewFilePromise.then(adobeViewer => {
                     adobeViewer.getAPIs().then(apis => {
                         apis.getPDFMetadata()
                             .then(result => console.log(result.numPages))
                             .catch(error => console.log(error));
                         apis.getCurrentPage()
                                 .then(result => console.log(result))
                                 .catch(error => console.log(error));
                            // All viewer APIs can be invoked here
                    });
                  });
                    
                    const eventOptions = {
                   //Pass the events to receive.
                   //If no event is passed in listenOn, then all file preview events will be received.
                   listenOn: [AdobeDC.View.Enum.FilePreviewEvents.PAGES_IN_VIEW_CHANGE],
                   enableFilePreviewEvents: true
          }
    
          adobeDCView.registerCallback(
                   AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
                   function(event) {
                         
                   }, eventOptions
          );
            });
           </script>
          </body>
          </html>
2 Likes

Hi @academy ,
Did you tried PDF Viewer bubble plugin?

and another one,

Demo link : Your Bubble app

Demo link : https://testnew111.bubbleapps.io/version-test/pdfview

I need free option

This one is free plugin

This topic was automatically closed after 70 days. New replies are no longer allowed.