Render and View PDF in SAP UI5 with Forms service ...

Jacky_Liu1 · ‎2022 Nov 23

In my blog Configure the SAP BTP Cloud Foundry Environment Subaccount with SAP Forms Service by Adobe and Test ... , we can get the base64 encoded adobe content in postman. In this blog, I will explain how to view the rendered pdf content in SAP UI5 application .

Prerequisites

You have a subaccount on SAP BTP, Cloud Foundry environment and the subaccount has entitlement of service Forms service by Adobe .

The following is the detailed steps :

Step 1. Creat destination base on service key adobeapikey in mentioned blog in BTP subaccount cockpit

Step 2. Create a button in sap ui5 application view

Step 3. Create the function in controller used in the view button in previous step.

The following is the code :

sap.ui.define([

    "sap/ui/core/mvc/Controller",

    "sap/m/MessageBox",

    "sap/m/PDFViewer",

    "sap/base/security/URLWhitelist",

],

    /**

     * @param {typeof sap.ui.core.mvc.Controller} Controller

     */

    function (Controller,MessageBox,PDFViewer,URLWhitelist) {

        "use strict";



        return Controller.extend("ui5applicationmodule.controller.appsingleview", {

            onInit: function () {

            },



            pdfRender:function(){



                var printd = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><form1><LabelForm><DeliveryId>Mirum est ut animus agitatione motuque corporis excitetut.</DeliveryId><Position>Ego ille</Position><MaterialNo>Si manu vacuas</MaterialNo><Quantity>Apros tres et quidem</Quantity><Package>Mirum est</Package><QRCode>01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</QRCode></LabelForm><LabelForm><DeliveryId>Ad retia sedebam: erat in proximo non venabulum aut lancea, sed stilus et pugilares:</DeliveryId><Position>Licebit auctore</Position><MaterialNo>Proinde</MaterialNo><Quantity>Am undique</Quantity><Package>Ad retia sedebam</Package><QRCode>01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</QRCode></LabelForm><LabelForm><DeliveryId>meditabar aliquid enotabamque, ut, si manus vacuas, plenas tamen ceras reportarem.</DeliveryId><Position>Vale</Position><MaterialNo>Ego ille</MaterialNo><Quantity>Si manu vacuas</Quantity><Package>Apros tres et quidem</Package><QRCode>01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</QRCode></LabelForm></form1>";

                var printdb64 = btoa(printd);



               var pdfcontent = {

                    embedFont: 0,

                    formLocale: "en_US",

                    formType: "print",

                    taggedPdf: 1,

                    xdpTemplate: "labelprint/PrintLabel",

                    xmlData: printdb64

                 };

                 

                $.ajax({

                    url: "/adobeapi/v1/adsRender/pdf?templateSource=storageName&TraceLevel=0",

                    type: "POST",

                    data: JSON.stringify(pdfcontent),

                    headers: {

                        "Content-Type": "application/json"

                    },

                    async: false,

                    success: function (data) {



                        const deccont = atob(data.fileContent);

                        const byteNumbers = new Array(deccont.length);



                        for (let i = 0; i < deccont.length; i++) {

                            byteNumbers[i] = deccont.charCodeAt(i);

                        }



                        const byteArray = new Uint8Array(byteNumbers);

                        const blob = new Blob([byteArray], {type: "application/pdf"});

                        

                        var pdfDocumentURL = URL.createObjectURL(blob);

                        if (!this._pdfViewer) {

                                    this._pdfViewer = new PDFViewer();

                                    this._pdfViewer.attachError(event => ErrorHandlerSingleton.getInstance().onError(event));

                                    URLWhitelist.add("blob");

                                }

                                 this._pdfViewer.setSource(pdfDocumentURL);

                                 this._pdfViewer.open(); 

                    },

                    error: function (err) {

                        console.log(err);

                        MessageBox.information(JSON.stringify(err));



                } });

            }

        });

    });

Step 4, Add route in xs-app.json in app router module .

Step 5, Test

After the MTA project deployed , we will find the application in BTP subaccount space .

Note: If you need more information about MTA project creation, you can refer to my blog

The End.

Thanks for your time !

Best Regards!

Jacky Liu

Render and View PDF in SAP UI5 with Forms service by adobe in BTP