Return PDF file promise

[czcpf]

Hello,

Scenario:

I'm looking for some code example to return a PDF file promise from the entryPoint=pdf url. This is to use a pdf viewer from adobeSDK. I guess I need to return a filePromise somehow? The below code is not working, (error is Ajax could not parse response) I suspect because what is returned from ?entryPoint=pdf is not the type of file promise adobe SDK is looking for. They give an example code for a file upload here but not an existing file sitting on server somewhere.

https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/

Does entryPoint=pdf return blob or arrayBuffer?

What I've Tried

let pdfUrl = ?entryPoint=pdf&entityType={MyEntityType}&entityId={MyEntityId}&templateId={MyTemplateId };

Espo.Ajax.getRequest(pdfUrl, null, {
        dataType: 'arraybuffer'
    })
    .then(data => {
        let blob = new Blob([data]);
        let reader = new FileReader();
        reader.onloadend = function(e) {
            console.log({
                adobeDCView: adobeDCView
            });
            let filePromise = Promise.resolve(e.target.result);
            // Pass the filePromise and name of the file to the previewFile API
            adobeDCView.previewFile({
                content: {
                    promise: filePromise
                },
                metaData: {
                    fileName: "File.pdf"
                }
            })
        };
        reader.readAsArrayBuffer(blob);

    });​

[Kharg]

You have to use fetch as Espo.ajax will append api/v1/ to the url.

[czcpf]

Thanks Kharg . This got me on the right track. Below is the code I'm using for loading adobe sdk viewer on pdf templates. Here, I'm calling a modal dialog to show the PDF in the viewer from a parentView call (not shown). Hope someone finds this useful.

define('my-module:views/modals/adobe-sdk-pdf-template-dialog', ['views/modal', 'model'], function(Dep, Model) {
    return Dep.extend({

        className: 'dialog dialog-record',

        isCollapsable: false,

        // template content can be defined right here or externally
        templateContent: `
            <div>{{{this.viewObject.subTitle}}}</div>
            <div id="adobe-dc-view"></div>
              
        `,

        // if true, clicking on the backdrop will close the dialog
        backdrop: true, // 'static', true, false

        afterRender: function() {
            Dep.prototype.afterRender.call(this);
            this.loadAdobeViewer('https://acrobatservices.adobe.com/view-sdk/viewer.js');
        },

        /**
         *
         * @param {string} url
         */

        loadAdobeViewer: function(url) {

            this.buttonList.forEach(o => {
                this.hideActionItem(o.name);
            });

            window.AdobeDC = undefined;
            window.adobe_dc_sdk = undefined;
            window.adobe_dc_view_sdk = undefined;

            let script = document.createElement("script");
            script.src = url;
            script.charset = 'utf-8';
            script.defer = true;

            document.head.appendChild(script);

            let pdfUrl = '?entryPoint=pdf&entityType=' + this.entityType +
                '&entityId=' + this.entityId + '&templateId=' + this.templateId;

            document.addEventListener("adobe_dc_view_sdk.ready", (e) => {

                this.buttonList.forEach(o => {
                    this.showActionItem(o.name);
                });

                let fileName = (this.options.title || 'file').replace(/ /g, "_") + '.pdf';

                let clientId = this.getConfig().get('adobeDeveloperClientApiKey'); //need to specify your own

                // switch clientId for localhost testing since clientId is domain sensitive
                if (window.location.hostname.includes('localhost')) {
                    clientId = this.getConfig().get('adobeDeveloperLocalHostClientApiKey');
                }

                let adobeDCView = new AdobeDC.View({
                    clientId: clientId,
                    divId: "adobe-dc-view"
                });
                adobeDCView.previewFile({
                    content: {
                        promise: this.fetchPDF(pdfUrl)
                    },
                    metaData: {
                        fileName: fileName
                    }
                }, {
                    defaultViewMode: "FIT_WIDTH",
                    showAnnotationTools: false
                });
            });
        },

        /**
         * @param {string} urlToPDF
         * @return {Promise<ArrayBuffer>}
         */
        fetchPDF: function(urlToPDF) {

            return new Promise((resolve) => {
                fetch(urlToPDF)
                    .then((resolve) => resolve.blob())
                    .then((blob) => resolve((blob).arrayBuffer()))
            });
        },


        setup: function() {
            Dep.prototype.setup.call(this);

            this.parentModel = this.options.parentModel; //passed from parent view
            let entityType = this.parentModel.entityType || ''; // passed from the parent view
            let entityId = this.parentModel.id || ''; // passed from the parent view

            let templateId = this.options.templateId || ''; //passed from parent view
            let subTitle = this.options.subTitle || ''; //passed from parent view
            let title = this.options.title || ''; // passed from the parent view


            this.subTitle = subTitle ? '<span class="small">' + this.getHelper().escapeString(subTitle) + '</span>' : ''; // escape to prevent XSS

            this.headerHtml = this.getHelper().escapeString(title);
            this.entityType = this.getHelper().escapeString(entityType);
            this.entityId = this.getHelper().escapeString(entityId);
            this.templateId = this.getHelper().escapeString(templateId);

        },


    });
});​

[Kharg]

Glad it helped!
Can you share a screenshot as well?

[czcpf]

Screenshots of modal dialog attached.