How to use a variable in Adobe's pdf embed API as URL-value?

Question

I use the Adobe PDF Embed API (https://www.adobe.io/apis/documentcloud/dcsdk/docs.html?view=view) to display pdfs within modals on a site of mine. As I want the modals to only change in one tiny detail (the file-url of the pdf displayed there) I wanted to use the filename dynamically. So I did that:

       document.addEventListener("adobe_dc_view_sdk.ready", function() {
                                var adobeDCView = new AdobeDC.View({
                                    clientId: "xyz",
                                    divId: "adobe-dc-view"
                                });
                                adobeDCView.previewFile({
                                    content: {
                                        location: {
                                            var model_filename_chosen = "https://www.URL.com/files/" +
                                                var model_filename;
                                           // Does get printed correctly
                                            console.log(model_filename_chosen);
                                          //doesn't get parsed at all
                                            url: model_filename_chosen
                                        }
                                    },
                                    metaData: {
                                        fileName: "Something"
                                    }
                                }, {

                                });
                            });

And that in the header before it

function openFahrzeugModal(data) {
        x = new bootstrap.Modal(document.getElementById("modalFahrzeug"));
        x.toggle();
        $('#input_model_hidden').val(data);
        var model_filename = data;
        console.log(data);
    }

And the trigger for those looks then something like that:

<a onclick="openFahrzeugModal('myfile1.pdf')">
   

So any log does get printed correctly but the pdf isn't shown at all, the modal opens up correctly. The variable does get printed in other elements of the modal correctly but within the Adobe embed-thing the result is empty. I do use the same domain for the code and the file and my API-key is valid. As soon as I enter a static URL (the same basically as the one that gets printed on the console) the pdf gets shown correctly.

Why is that and what would I need to fix?

Answer 1

It's a timing issue. The code you have on top will run as soon as our library is loaded. What you want instead is for the previewFile code to run only on user input. I'd modify openFahrzeugModal such that it will run that part. Something like this:

function openFahrzeugModal(data) {
   x = new bootstrap.Modal(document.getElementById("modalFahrzeug"));
   x.toggle();
   $('#input_model_hidden').val(data);
   var model_filename = data;
   var model_filename_chosen = "https://www.URL.com/files/" +  model_filename;

   adobeDCView.previewFile({
      content: {
         location: {
           url: model_filename_chosen
         }
      },
      metaData: {
         fileName: "Something"
      }
   }, {
   });
 }

I typed that by hand so it may not be perfect. Do know however that you don't want to run your click event until the library is ready. Normally I'd assign the click handler in JS, not HTML, and do it inside the event handler for adobe_dc_view_sdk.ready.

Answer 2

Thanks Raymond, very good help with that script.

I copy and fix it

function OpenPdf(data) {
    let adobeDCView = new AdobeDC.View({clientId: ADOBE_KEY, divId: "pdfDisplay" });
   var model_filename = data;
   var model_filename_chosen = "your URL" +  model_filename;
   adobeDCView.previewFile({
     content: {location: {url: model_filename_chosen}},
     metaData: {fileName: "yournamefile.pdf" }
   });
 }

I'm a Coldfusion developer and have json array and in this one a have the pdf file name.

I did this loop with te call of the function

<p id="navLinks" style="display:none">
<cfloop index="i" from="1" to="#arrayLen(res.contracts)#"> 

     <cfoutput>
        Periodo: #res.contratos[i].period#> -- <button onclick="OpenPdf('#res.contracts[i].document#')">Open contract</button><br> 
     </cfoutput>
</cfloop> 
</p>    

<div id="pdfDisplay"></div>

But in another json I have a field where I have the pdf file in base64 format. The PDF API can read binary variables? Or I have to write it on disk first and later pass the PDF's URL? I would like to hide the PDF URL for security reasons.

Actually I have this and open the file in a new tab browser but I want to use the PDF API.

<cfset myPDF = ToBinary(cfData.content)>
<cfcontent type="application/pdf" variable="#myPDF#">

Regards