
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 Screen
UI Screen
Folder with files
Text File
PDF 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!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
11 | |
5 | |
5 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |