- Generate PDF at Client Side with jsPDF plugin - Part 1
- Generate PDF at Client Side with jsPDF plugin - Part 2
- Generate PDF at Client Side with jsPDF plugin - Part 3
In my previous blog we saw that how to display as a PDF, a simple form using jsPDF plugin at client side.
But in part 1 we were unable to download PDF as same as our Form. We were getting data row wise and this was not looking cool. :twisted:
In this blog we will solve this problem. If you are unable to understand what I am talking about then go to part-1.
When I was searching on Google I found out this link. This gave me a hint that where I have to move. http://stackoverflow.com/questions/28193487/how-to-use-addhtml-function-in-jspdf
I downloaded the zipped file from this link.
After downloading this zipped folder extracted it to machine.
When I started copying this to my project, every single js file was throwing error. I don’t know what was this and again took help of google.
With too many tabs opened, I saw this link.
I saved this file as a local .js file to my system.
I thought that this is of no use to me but downloaded this also. I will tell you what benefit for downloading this was.
I copied html2canvas.js to webContent folder of my project.
And commented the code which was earlier written in method display() of controller with this code. I found it somewhere but I don’t remember from where.
var doc = new jsPDF('p','pt','a4');
doc.addHTML($('#formId').get(0),function() {
doc.save('form.pdf');
});
But OMG!!. :sad:
Again an error.
But I was sure that this is related to some .js file inclusion. But I was not sure that what was that but then the another file I have downloaded strike to my mind and I also included that file to my webContent folder. But again the error was same.
Then I commented all of these lines from my Index.html leaving behind that two javascript files.
<!-- <script src="jspdf.js"></script> -->
<!-- <script src="jspdf.plugin.from_html.js"></script> -->
<!-- <script src="jspdf.plugin.split_text_to_size.js"></script> -->
<!-- <script src="jspdf.plugin.standard_fonts_metrics.js"></script> -->
<!-- <script src="adler32cs.js"></script> -->
<!-- <script src="deflate.js"></script> -->
<!-- <script src="FileSaver.js"></script> -->
<!-- <script src="FileSaver.min.js"></script> -->
And this time when I pressed the button in my app, a PDF was downloaded. And this time PDF was same as my form. I checked it with table and it was also working for it.
Now I have commented a lot of scripts file and then checked if our previous code will execute or not and that was also working perfectly.
So after total of one day and half night spend I came to conclusion that we don’t need to include all of these files in my application.
<!-- <script src="jspdf.js"></script> -->
<!-- <script src="jspdf.plugin.from_html.js"></script> -->
<!-- <script src="jspdf.plugin.split_text_to_size.js"></script> -->
<!-- <script src="jspdf.plugin.standard_fonts_metrics.js"></script> -->
<!-- <script src="adler32cs.js"></script> -->
<!-- <script src="deflate.js"></script> -->
<!-- <script src="FileSaver.js"></script> -->
<!-- <script src="FileSaver.min.js"></script> -->
Only this single file was enough for our part-1 blog.
<script src="jspdf.debug.js"></script>
We can also include this as our .js files.
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
This is the output.
Table Display Below
Anyway by this hard R&D I learned a lot and I am planning to research some more.If you also learned something then let me know by your valuable comments.
Next time I will come with SAP Gateway data and one another thing that is how to display this same PDF in our browser only without downloading.
Wish me good luck. :wink:
Note:- As i found somewhere that many of the elements of jQuery are not supported with jsFile then this will be also applicable for UI5 applications.
Regards
Dhananjay
- SAP Managed Tags:
4 Comments
