Skip to Content
Author's profile photo Abdel DADOUCHE (SAP)

Give the power of Zip to your SAPUI5 applications

Usually before writing any of my blog post, I try to find a catchy title and associate a funny picture.

So what funny picture can be found around zip archive and SAPUI5?

Thank you Dr Evil from Austin Powers!

To give you some context, I was looking at the SAP Leonardo Machine Learning API, more precisely the Similarity Scoring API for which I wanted to build a tutorial for the SAP Developer Center and link it to the existing series named SAP Leonardo Machine Learning services with SAPUI5 .

The Similarity Scoring API expects an archive file made of a series of text files, each one containing the vector of features extract from the Image Feature Extraction API.

With Java, no problem as you can use the and there are plenty of example around it.

But what about with SAPUI5 or other JavaScript-based application framework?


So I started looking around for a native feature, which I couldn’t find. Then extended my search to my dear search engine friend.

After a few iteration, the best option I found so far was JSZip! But JSZip doesn’t come with a “save as“, so as recommended by them I also used FileSaver too!


JSZip in a nutshell

JSZip is a JavaScript library for creating, reading and editing .zip files, with a lovely and simple API.

JSZip is dual-licensed. You may use it under the MIT license or the GPLv3 license.

I highly recommend you to check the LICENSE for more details.


GitHub repository


FileSaver in a nutshell

FileSaver.js is the solution to saving files on the client-side, and is perfect for webapps that need to generate files, or for saving sensitive information that shouldn’t be sent to an external server.

FileSaver is licensed under the MIT license.

I highly recommend you to check the LICENSE for more details.

GitHub repository

Update: Since I first wrote this blob, there was a change in the code that results in an error. Therefore, please use the links provided later and not the Git Repository.

How to use third-party library in your SAPUI5 application

I couldn’t find much official documentation about that topic, The only link I can share if the sap.ui.define function.

There are a multitude of blog posts and articles with different approaches around how to achieve that. So my goal will be to share my view on it, while trying to summarize what I found..

So, how do you import a third party library in a SAPUI5 application?

Import the library file in your project structure

First you need to import the library the jszip.js (or mini-fied version jszip.min.js) in your application.

To do this, you will simply import the physical jszip.js file (or the minified version jszip.min.js) and the FileSaver.js (or the minified version FileSaver.min.js) in your project structure (usually in a libs directory under webapp).

These files are located in the GitHub repository:

Your project structure you look like this:

In my case I have added the minified versions.

Load the library file in your application

Loading libraries in SAPUI5 could be done in so many ways, but I think that most reliable one is to either use the Component.js file or the controller you are planning to use it in.

This is the code of my Component.js:

	/* for the JSZip library    */ "demomyproject/libs/jszip.min",
	/* for the FileSaver library*/ "demomyproject/libs/FileSaver.min"
], function(UIComponent, Device, models) {
	"use strict";

	return UIComponent.extend("demomyproject.Component", {

You can see that the path to the library include the application name and the namespace. In my case my application is named “myproject” and the namespace is “demo”.

You can find it in the “extend” method call at the end of the code snippet.

Use it in your application

To keep it really short, I built a SAPUI5 app and just added a button with a press event calling the onPress function of my controller.

Here is my demo.view.xml:

<mvc:View controllerName="demomyproject.controller.demo" xmlns:html="" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m">
			<Page title="{i18n>title}">
					<Button text="Test JSZip &amp; FileSaver" press="onPress"></Button>

and here my demo.controller.js:

/* global JSZip:true */
/* global saveAs:true */
], function(Controller) {
	"use strict";

	return Controller.extend("demomyproject.controller.demo", {
		onPress: function(oControlEvent) {
			var zip = new JSZip();
			zip.file("Hello.txt", "Hello World\n");
					type: "blob"
				.then(function(content) {
					// see FileSaver.js
					saveAs(content, "");

The global annotations at the beginning will prevent the Web IDE to raise errors when using the external library.

Now, you can run the application, and press on the button. This will trigger the creation of a zip file named containing a Hello.txt fil that contains a Hello World message.


If you want to learn more, you can check


Want more?

If you want to get hands on additional materials on that topic, the SAP Developer Center provides a multitude of online tutorials made by the SAP developer community for the community.

I also encourage you to::

Thank you for reading, Have fun and Remember that “sharing is caring”! ?


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Arjun Biswas
      Arjun Biswas

      Nice Blog ! Can we provide passwords to zip in SAPUI5 applications.

      Author's profile photo Abdel DADOUCHE (SAP)
      Abdel DADOUCHE (SAP)
      Blog Post Author


      I looked at this while searching for an archiving library, but it seems that there is no option available as of today.

      This is a know limitation like others (

      Several request were made to Stuk (the repository owner), but the complexity seems high and may not work for all environments.

      One evidence of that is that even in Node.js, developers will prefer to spawn a thread and use the local zip/archiving tools instead of writing and using a platform generic one.

      Author's profile photo Arjun Biswas
      Arjun Biswas

      Thank you.

      Author's profile photo Michael James Dugay
      Michael James Dugay

      Hi. The links in the article for FileSaver.js and FileSaver.min.js are not working anymore.. Can you give the correct links please? I found this link and tried to import it but it has several errors.

      Author's profile photo Abdel DADOUCHE (SAP)
      Abdel DADOUCHE (SAP)
      Blog Post Author



      it it seems that the Git repository owner did some restructuring.

      Here is the correct link :

      Have fun and thanks for your feedback

      Author's profile photo Michael James Dugay
      Michael James Dugay

       Hi, I copy-pasted from the link but I’m getting "Illegal export declaration error" in the export default var saveAs line of FileSaver.js. Any ideas?

      export default var saveAs = saveAs || (function(view) {
      	"use strict";
      	// IE <10 is explicitly unsupported
      	if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
      		  doc = view.document
      		  // only get URL when necessary in case Blob.js hasn't overridden it yet
      		, get_URL = function() {
      			return view.URL || view.webkitURL || view;
      Author's profile photo Abdel DADOUCHE (SAP)
      Abdel DADOUCHE (SAP)
      Blog Post Author

      Nailed it!

      It seems that he made some change that is not working anymore in a browser. Apparently, the owner took the Node.js direction instead of the browser.

      I have updated the links in the blob with the previous versions of the JavaScript files to be included.

      Author's profile photo Vinay Kumar
      Vinay Kumar

      thanks for the nice blog Abdel, really appreciate the explanation

      Author's profile photo Fotios Tragopoulos
      Fotios Tragopoulos

      This example works nice. How can I download several files from the OData service with an array of links instead of just creating a

      zip.file("Hello.txt", "Hello World\n");

      Let's say that I have the following links which I want to download in a zip

      var URLs = [