SAPUI5: Vorlage zum Rendern von Base64-Binärdateien (PDF/Bild) in UI5

Ein Handbuch zum Rendern von PDF-Dokumenten und Bildern, die im XSTRING/Base64-Format über ein OData-Gateway empfangen werden, direkt in der UI5-Ansichtsschicht mit iframe- und Canvas-Architektur, ohne einen externen Download im Browser auszulösen.

In unternehmensweiten Fiori-Szenarien (z. B. Anzeige von SD-Rechnungen, MM-Bestellfreigaben, PP-technische Zeichnungsverfolgung) werden im Backend erstellte Dokumente häufig als Base64-kodierte Zeichenfolge an das Frontend übertragen. Anstatt den Benutzer zum Herunterladen dieser Daten als Datei aufzufordern, ist die nahtlose Bereitstellung einer Vorschau direkt im Fiori Launchpad Teil der modernen Designsprache. In diesem Leitfaden untersuchen wir Vorlagen zur Konvertierung von rohen Base64-Daten in Datenströme (Blob-URIs), die der Browser sicher interpretieren kann, sowie deren Integration.

💡 Regeln für die Konvertierung und das Rendern von Binärdaten

Blob (Binary Large Object) Standard: Das direkte Einbetten von rohen Base64-String-Daten in das src-Attribut eines <iframe>-Elements (Data-URI-Schema) kann bei großen Dateien (z. B. PDFs über 2 MB) aufgrund von Browser-Speicherlimits zu Abstürzen führen. Der Unternehmensstandard besteht darin, diese Daten zuerst in ein JavaScript-Blob-Objekt umzuwandeln und dann mit URL.createObjectURL(oBlob) eine eindeutige virtuelle Speicheradresse zu generieren.
MimeType-Sensitivität: Während der Konvertierung muss der Datentyp (z. B. application/pdf, image/png) korrekt an die Blob-Engine übergeben werden. Andernfalls könnte der Browser das Dokument als reinen Text interpretieren oder es direkt zum Dateisystem zum Download anbieten, anstatt es zu rendern.
Speicherverwaltung (URL-Bereinigung): Mit URL.createObjectURL erzeugte virtuelle Adressen belegen den Browserspeicher, bis die Seite geschlossen wird. Auf Bildschirmen, die große Dokumente verarbeiten, sollten Speicherreste durch den Aufruf von URL.revokeObjectURL(sBlobUrl) bereinigt werden, wenn ein Dialogfenster oder eine Seite geschlossen wird.
Sicherheit von HTML5-Steuerelementen: Beim Ausführen von nicht standardmäßigen nativen HTML-Elementen (wie <iframe>) in der XML-View-Schicht sollten das geschützte sap.ui.core.HTML-Steuerelement von SAPUI5 oder flexible Wrapper-Strukturen bevorzugt werden.

💻 Controller & XML-View-Implementierungsreferenz

0. XML-View-Schicht - Dokumentencontainer-Design (Document.view.xml)

Ein natives responsives Steuerelement für Bilder und ein kontrolliertes, gekapseltes, flexibles HTML-Iframe-Layout für PDF-Dokumente.

<mvc:View 
    controllerName="ui5.app.controller.Document"
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns:core="sap.ui.core"
    xmlns="sap.m">

    <Page id="documentPage" title="Enterprise Document Viewer" titleAlignment="Center">
        <content>
            <VBox class="sapUiResponsiveMargin" gap="15px" alignItems="Center">
                
                <!-- 1. Image View Container (Bound conditionally via local state) -->
                <Image id="imgViewer" 
                       src="{localUiModel>/imageSourceUrl}" 
                       visible="{= !!${localUiModel>/imageSourceUrl} }"
                       width="100%" 
                       height="auto" 
                       alt="Document Payload View" />

                <!-- 2. PDF View Container using core HTML Native element sarmalayıcısı -->
                <Panel id="pnlPdfContainer" 
                       headerText="PDF Preview Panel" 
                       width="100%" 
                       height="600px"
                       visible="{= !!${localUiModel>/pdfSourceUrl} }">
                    <content>
                        <core:HTML id="htmlPdfIframe" />
                    </content>
                </Panel>

            </VBox>
        </content>
    </Page>
</mvc:View>

1. Controller-Schicht - Base64-zu-Blob-Konvertierungslogik (Document.controller.js)

Parsen der Base64-String-Daten vom OData-Dienst in Byte-Arrays (ArrayBuffer), Erzeugen einer sicheren Blob-URI und Freigeben des Speichers.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/m/MessageBox"
], function (Controller, JSONModel, MessageBox) {
    "use strict";

    return Controller.extend("ui5.app.controller.Document", {

        onInit: function () {
            // Track dynamic virtual memory allocation trace references
            this._sActiveBlobUrl = null;

            var oUiModel = new JSONModel({
                imageSourceUrl: "",
                pdfSourceUrl: ""
            });
            this.getView().setModel(oUiModel, "localUiModel");
        },

        onProcessIncomingDocument: function (sBase64Payload, sMimeType) {
            // Pre-execution validation checklist
            if (!sBase64Payload) {
                MessageBox.error("Empty document payload rejected by viewer framework.");
                return;
            }

            // Clean active memory footprint if a previous document track exists
            this._clearActiveBlobMemory();

            try {
                // Convert Base64 string data stream directly into a standard Web Browser Blob Object
                var oBlob = this._convertBase64ToBlob(sBase64Payload, sMimeType);
                
                // Generate a lightweight sandboxed internal address pointer linking to local memory
                this._sActiveBlobUrl = URL.createObjectURL(oBlob);
                
                var oUiModel = this.getView().getModel("localUiModel");

                // Route the calculated address pointer to the corresponding UI rendering container
                if (sMimeType.indexOf("image") >= 0) {
                    oUiModel.setProperty("/imageSourceUrl", this._sActiveBlobUrl);
                    oUiModel.setProperty("/pdfSourceUrl", "");
                } else if (sMimeType.indexOf("pdf") >= 0) {
                    oUiModel.setProperty("/imageSourceUrl", "");
                    oUiModel.setProperty("/pdfSourceUrl", this._sActiveBlobUrl);
                    
                    // Inject absolute native iframe markup securely into the core HTML UI5 component
                    var oHtmlControl = this.byId("htmlPdfIframe");
                    if (oHtmlControl) {
                        oHtmlControl.setContent("<iframe src='" + this._sActiveBlobUrl + "' width='100%' height='100%' style='border:none;'></iframe>");
                    }
                }
            } catch (oConversionError) {
                MessageBox.error("Binary buffer array conversion schema failed: " + oConversionError);
            }
        },

        _convertBase64ToBlob: function (sBase64Data, sContentType) {
            // Decode base-64 encoded string back into binary string format standard representation
            var sBinaryString = atob(sBase64Data);
            var iLen = sBinaryString.length;
            
            // Allocate internal structural typed raw array container matching file buffer metrics
            var oUint8Array = new Uint8Array(iLen);
            
            for (var i = 0; i < iLen; i++) {
                oUint8Array[i] = sBinaryString.charCodeAt(i);
            }
            
            // Build absolute high-performance binary block reference object mapping the exact content headers
            return new Blob([oUint8Array], { type: sContentType });
        },

        _clearActiveBlobMemory: function () {
            // Best Practice: Evict resource links from browser registry tracking allocation boundaries to avoid browser leaks
            if (this._sActiveBlobUrl) {
                URL.revokeObjectURL(this._sActiveBlobUrl);
                this._sActiveBlobUrl = null;
            }
        },

        onExit: function () {
            // Defensive cleanup orchestration on controller destruction lifecycle step
            this._clearActiveBlobMemory();
        }
    });
});

Verpassen Sie nicht den neuen Code in der Bibliothek!

Abonnieren Sie den Newsletter, um sofort über wöchentlich aktualisierte unternehmensweite SAPUI5/Fiori-Komponenten, Leistungstipps und Architekturentwürfe informiert zu werden.