Downloading multiple files as a single zip folder in SAP UI5 Application

[Rahul_Kanti]

Introduction

In this blog we will learn to download multiple files within a single zip file using JSZip javascript library. We will also be using jsPDF library inorder to generate PDF.

Before proceeding lets have a brief on the libraries being used 
JSZip : A library for creating, reading and editing .zip files with JavaScript.
jsPDF : A library for generating .pdf files with Javascript

Application Development

Inorder to use the above mentioned libraries we have to add the below script tags in our index.html file

    <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.54/vfs_fonts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

Next, we are creating a simple button which once clicked will download the zip file containing a PDF(.pdf) file and a text(.txt) file.

So in the view file the button named Download-zip is binded to onPress function as seen below:

<mvc:View controllerName="com.demo.project1.controller.Home"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" >
    <content>
 
                <Button type="Accept"
                        text="Download Zip"
                        press="onPress"
                        ariaDescribedBy="acceptButtonDescription genericButtonDescription"/>
 
        </content>
    </Page>
</mvc:View>

Lets jump into the logic for the onPress function in our controller file

onPress: function () {
                var doc=new jsPDF()
                doc.setFontSize(12);
                doc.text(10, 10, "Hello, this is a pdf file.");
                var pdfBlob = doc.output('blob');
                zipContent.push({
                    name: 'Document.pdf',
                    content: pdfBlob
                });
                var txtBlob = new Blob(['Hello, this is a text file.'], { type: 'text/plain' });
                zipContent.push({
                    name: 'DemoTextFile.txt',
                    content: txtBlob
                })
                var zip = new JSZip();
                var count = 0;
                var totalFiles = zipContent.length;
               
                function addFileToZip(index) {
                    var file = zipContent[index];
                    var filename = file.name;
                    var content = file.content;
 
                    zip.file(filename, content, {
                        binary: true
                    });
                    count++;
                    if (count === totalFiles) {
                        zip.generateAsync({
                            type: "blob"
                        }).then(function (content) {
                            // Create a download link
                            var link = document.createElement("a");
                            link.href = URL.createObjectURL(content);
                            link.download = "data.zip";
                            link.click();
                            URL.revokeObjectURL(link.href);
                        });
                    }
                }
                for (var i = 0; i < totalFiles; i++) {
                    addFileToZip(i);
                }
            }

Here first we are generating a blob of the contents of a jsPDF document and then pushing it as an object inside an array named “zipContent”, Then again we are creating a Blob of a demo text content and again pushing its as an object to the zipContent array. Now our “zipConent” array has two objects which means two different types of files namely Document1.pdf and Document2.txt so we create a new instance of the JSZip then iterate over the files in the zipContent array and add each file to the JSZip object generating the zip file asynchronously and, once completed, a download link for the zip file is created . This link is triggered to initiate the download.

Output

UI ScreenUI ScreenFolder with filesText FilePDF File

Conclusion
In this blog, We learned how to download multiple files as single ZIP file using the popular JSZip library of the javascript.

Hope this blog was helpful in enrichining your knowledge.

Thanks!