Created
February 19, 2019 11:52
-
-
Save shahzebkhan111/8b30088abeed722bb3e7b985db70781c to your computer and use it in GitHub Desktop.
Using jspdf to export data as pdf
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // include jspdf and jspdf-auto | |
| //base function that i called on button click. | |
| function exportReportTable() { | |
| imageDataToUrl($("#imgUrl").val(), function(dataUrl) { | |
| exportReportAsPdf(dataUrl) | |
| }); | |
| } | |
| // This function converts the image to data which can be use to add as logo. | |
| function imageDataToUrl(imageUrl, callback) { | |
| var xhr = new XMLHttpRequest(); | |
| xhr.onload = function() { | |
| var imageFile = new FileReader(); | |
| imageFile.onloadend = function() { | |
| callback(imageFile.result); | |
| } | |
| imageFile.readAsDataURL(xhr.response); | |
| }; | |
| xhr.open('GET', imageUrl); | |
| xhr.responseType = 'blob'; | |
| xhr.send(); | |
| } | |
| // function using jspdf and jspdf-auto. | |
| function exportReportAsPdf(imgData){ | |
| var doc = new jsPDF(); | |
| // To display header and log on single page, uncomment the line and remove from header section. | |
| /*doc.addImage(imgData, 'png', 12, 5, 20, 20); | |
| doc.setFontSize(12); | |
| doc.text($("#companyName").val(), 60, 10); | |
| doc.text("Payment Vouchers", 80, 15); | |
| doc.text("Date From: " + $("#fromDate").val() + " To: " + $("#toDate").val(), 65, 20);*/ | |
| var header = function (data) { | |
| doc.setTextColor(40); | |
| doc.setFontStyle('normal'); | |
| doc.addImage(imgData, 'png', 12, 5, 20, 20); | |
| doc.setFontSize(12); | |
| doc.text($("#companyName").val(), 60, 10); | |
| doc.text("Payment Vouchers", 80, 15); | |
| doc.text("Date From: " + $("#fromDate").val() + " To: " + $("#toDate").val(), 65, 20); | |
| doc.setFontSize(10); | |
| }; | |
| doc.autoTable({ | |
| margin: { | |
| top: 30 | |
| }, | |
| html: '#reportTable', | |
| didDrawPage: header, | |
| bodyStyles: {valign: 'top'}, | |
| styles: {overflow: 'linebreak', cellWidth: 'wrap'}, | |
| columnStyles: {2: {cellWidth: 'auto'}} // 2 represents the 2nd column | |
| }); | |
| // To add water mark | |
| doc = addWaterMark(doc, imgData); | |
| doc.save("Payment_Voucher_Report_"+ $("#fromDate").val()+"_"+$("#toDate").val()+".pdf"); | |
| } | |
| // This function add water mark text at bottom. You can change the location and text. | |
| function addWaterMark(doc,imgData) { | |
| var totalPages = doc.internal.getNumberOfPages(); | |
| for (i = 1; i <= totalPages; i++) { | |
| doc.setPage(i); | |
| //doc.addImage(imgData, 'PNG', 40, 40, 75, 75); | |
| doc.setTextColor(150); | |
| doc.setFontSize(8); | |
| doc.text(140, doc.internal.pageSize.height - 10,"Report has total "+totalPages+" pages. This is "+ i+" of "+totalPages); | |
| //doc.text(30, 30, 'Report Text', null, 46); | |
| } | |
| return doc; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment