Announcement

Collapse
No announcement yet.

Return PDF file promise

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • czcpf
    replied
    Screenshots of modal dialog attached.
    Attached Files

    Leave a comment:


  • Kharg
    commented on 's reply
    Glad it helped!
    Can you share a screenshot as well?

  • czcpf
    replied
    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.

    Code:
    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);
    
            },
    
    
        });
    });​

    Leave a comment:


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

    Leave a comment:


  • czcpf
    started a topic Return PDF file promise

    Return PDF file promise

    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.




    Does entryPoint=pdf return blob or arrayBuffer?

    What I've Tried

    Code:
    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);
    
        });​
    Last edited by czcpf; 04-30-2024, 10:45 PM.
Working...
X