How to create Pdf using Spring and Angular js

Question

I want to create a PDF file so that when I click on a button SaveToPDF it should fulfill the requirement. But I'm unable to do it, any help on how to achieve this using RestEndCall through back-end using SpringMVC and for front-end using Angular4/5/6/7/8+

Also, what data should I be sending to back-end? And to be precise, I don't want to create each cell by cell. If there is any other option to create a PDF which look exactly like the web page.

by using pd4ml and itext pdf you can convert HTML page into pdf or you can make your own pdf — Kalaiselvan, Feb 02 '18 at 05:36
https://stackoverflow.com/questions/34049956/generate-pdf-from-html-using-pdfmake-in-angularjs — Sajeetharan, Feb 03 '18 at 11:43
have you considered using Puppeteer from Google? https://developers.google.com/web/tools/puppeteer/?authuser=3&hl=vi — David Perlman, Feb 05 '18 at 15:23
If I make my own pdf, I wont make same like the web page right.?? the css styles they have used in the web page will be missing. — user3132347, Feb 06 '18 at 17:54
yes @BhushanUniyal. I have web page where few details are displayed.. lets say, when you open bank statement and when you click on save to pdf , the same web page is converting to PDF right.. that kind of stuff I need. — user3132347, Feb 06 '18 at 17:58
@user3132347 i have mentioned piece of code which will help you to achieve this, you need to modify the given code and trigger event during save pdf option — Bhushan Uniyal, Feb 07 '18 at 08:54

score 3 · Answer 1 · answered Feb 07 '18 at 08:52

You can easily achieve it in the frontend, no need to backed request. Here is angular example:

<html ng-app="app">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<script>
var app = angular.module("app", []);

 app.controller("listController", ["$scope",
   function($scope) {
     $scope.data=  [{"agence":"CTM","secteur":"Safi","statutImp":"operationnel"}];

     $scope.export = function(){
        html2canvas(document.getElementById('exportthis'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500,
                    }]
                };
                pdfMake.createPdf(docDefinition).download("test.pdf");
            }
        });
     }
   }
 ]);
</script>
</head>
<body>
  <div ng-controller="listController">
    <div id="exportthis">
      download me as a pdf
    </div>
    <button ng-click="export()">export</button>
  </div>
<body>
</html>

score 2 · Answer 2 · answered Feb 06 '18 at 23:11

You ask about how to create a Page screenshot in a PDF format.

In practice, client-side libraries for making pdf are very limited by functionality and produce poor result,

Whats left is server-side rendering.

I had success with wkhtmltopdf a long time ago, there are some other alternatives.

You can start your implementation journey by searching wkhtmltopdf or PhantomJS alternatives for Java.

How should this work? Headless browsers open a URL and wait for a window.variable, when true script (same wkhtmltopdf for example) makes the job. There is an answer with a list of headless browsers. Best PDF solutions will be based on any of them.

This really is the best answer, we are currently using wkhtmltopdf and while it doesn't always get the conversion perfectly, it really is the best we have found. — init fail, Feb 08 '18 at 17:34

How to create Pdf using Spring and Angular js

2 Answers2