CODEWITHSUNDEEP
javascriptpdfadobe-embed-api
Pierre Emmanuel Fega
Pierre Emmanuel Fega

Reputation: 11

Adobe PDF Embed API can not change the pdf (the return of)

I have almost the same problem that in thread "Adobe PDF Embed API can not change the pdf" and "How to use a variable in Adobe's pdf embed API as URL-value?". which both were addressed by Mr Raymond Camden. The only difference is that I am trying to pass an url to location:url from Flask. Here's the code:

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

function displayPDF(urldata) {
    
    document.writeln(urldata[0]);
    document.writeln(urldata[1]);
    var myURL = urldata[0];
    var myFileName = urldata[1];
    adobeDCView.previewFile({
        content: {
            location: {
                url: myURL,
            },
        },
        metaData: {
            fileName: myFileName
        }
    }, viewerConfig);
}

Note that I am using Mr Camden trick for dealing with

well-seasoned chicken and nice fresh eggs

. I can get my 2 parameters going to the html file and to the js file. They are both writelined on the page from the displayPDF(urldata) function. Unfortunately they don't make it to content:location:url and metadata:filename. If I do hardcode these two parameters with existing PDF url and filename I get the result I want to obtain.

What am I doing wrong?

Thanks to anybody who could give me a clue.

All the best,

Pierre-Emmanuel FEGA [email protected]

Upvotes: 0

Views: 905

Answers (1)

Pierre Emmanuel Fega
Pierre Emmanuel Fega

Reputation: 11

I've found an answer to my own question. I have posted it on Adobe Community forum as well because "Passing value from external function to document function" because both responses from Shubhanshu Dixit and Raymond Camden have been of great help to me.

My goal was to open a PDF file coming from Azure Blob Storage to use it in an Azure Web App. The app is in Flask. Here's how I've done it and it works great on Azure as well as locally:

FLASK ROUTE

@app.route("/document", methods=['GET', 'POST'])
def document():   
# Microsoft blob storage SAS token creation for accessing PDF file in blob storage
  blob = get_blob_sas(BLOB_NAME_PATH, STORAGE_ACCOUNT_KEY, BLOB_CONTAINER_NAME, document_to_retrieve)   
  blob_url = 'https://'+BLOB_NAME_PATH+'.blob.core.windows.net/'+BLOB_CONTAINER_NAME+'/'+document_to_retrieve+'?'+blob
# URL and Filename parameters to send to Adobe Embed API    
  urldata = [blob_url, document_to_retrieve]
return render_template('view.html', title='SYSTRA Semantic Selected Document', urldata=urldata)

HTML PAGE

<!DOCTYPE html>
<html>
<head>
    <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"/>

    <script type="text/javascript" src="{{ url_for('static', filename='view.js') }}"></script>
    <script type="text/javascript">
        varPDF = previewFile({{urldata|tojson}})
    </script>
</head>
<body style="margin: 0px">

    <div id="adobe-dc-view"></div>
    <script type="text/javascript" src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
</body>
</html>

JAVASCRIPT FUNCTIONS

function previewFile(urldata) {

    var myURL = urldata[0];
    var myFileName = urldata[1];

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

function displayPDF(myURL, myFileName) {

    document.write('displayPDF');
    const viewerConfig = {
        embedMode: "FULL_WINDOW",
        defaultViewMode: "FIT_PAGE",    
        showLeftHandPanel: true,
        showAnnotationTools: true,
        showDownloadPDF: true,
        showPrintPDF: true,
        showPageControls: true,
        showDisabledSaveButton: true,
        downloadWithCredentials: true
    };

    var adobeDCView = new AdobeDC.View({
        clientId: '<CLIENT_ID_KEY_HERE',
        divId: "adobe-dc-view"
    });

    adobeDCView.previewFile({
        content: {
            location: {
                url: myURL,
            },
        },
        metaData: {
            fileName: myFileName
        }
    }, viewerConfig);
}

I hope this helps.

All the best, Pierre-Emmanuel

Upvotes: 1

Related Questions