Introduction

Welcome to a comprehensive guide on “Downloading PDFs in SAP UI5”. If you’ve ever grappled with the task of managing PDF files within your SAP UI5 applications, you’re in the right place. This tutorial will break down the process, providing you with an easy-to-follow method to implement this feature. Learn how to facilitate seamless PDF downloads, enhancing the user experience and functionality of your SAP UI5 application. So, whether you’re a seasoned developer or just starting out, this guide will help you master the process of PDF downloads in SAP UI5.

How to Download PDF using JavaScript

If you want to download a PDF file using JavaScript, you can use the built-in fetch API to retrieve the file from the server and then create a Blob from the response. After that, you can create a link element and simulate a click on it to start the download. Here are the steps:

1. Make an HTTP request for the file: You can use the fetch API, which returns a promise that resolves to the Response to that request, whether it is successful or not.

2. Read the response as a Blob: The response object resulting from the fetch request contains several methods to read the body in various formats. You can use `response.blob()` to read the response as a Blob which represents the PDF file.

3. Create an object URL representing the Blob: Once you have the Blob, you can create an object URL for it using `URL.createObjectURL(blob)`. This will return a URL representing the blob, which you can use to link to the file.

4. Simulate a link click to download the file: Now you can create a new link element, set its `href` attribute to the object URL, and simulate a click on it. This will start the download of the file.

5. Revoke the object URL: After starting the download, it’s a good practice to revoke the object URL with `URL.revokeObjectURL(objectUrl)` to free up memory.

Please note, if you’re going to implement it on a webpage, make sure the server is configured to allow such downloads, the correct CORS headers are set, and the file is available to be fetched and downloaded. This method should work in most modern browsers.

Download PDF in SAP UI5

View

<mvc:View controllerName="pdfDownload.pdfDownload.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="My Project Ideas: Download PDF in UI5">
                    <content>
                        <Link id="downloadLink" text="Download PDF" press="onDownloadPDF"/>
                        <PDFViewer id="pdfViewer" source="https://www.africau.edu/images/default/sample.pdf" width="100%" height="600px"/>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

Controller

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("pdfDownload.pdfDownload.controller.Main", {
        onInit: function () {

        },

        onDownloadPDF: function () {
            // Replace with the actual URL of the PDF file or get it from OData
            var pdfURL = "https://www.africau.edu/images/default/sample.pdf";
            var link = document.createElement("a");
            link.href = pdfURL;
            link.target = "_blank";
            link.download = "document.pdf";
            link.click();
        }
    });
});

Output