Post
Ask Question

Generate PDF From An HTML Page Using Angular

Introduction

In this article, I am going to explain how to generate PDF file from an HTML page using AngularJS in SharePoint. This is the effortless way to port the SharePoint list data or any other list data to carry, print, and make a hard copy. Unless we generate PDF files with the SharePoint list data, we can’t take it out of a SharePoint Server to manipulate the data physically. This is useful when we don’t work with systems, such as when we are offline, we get power cuts, or facing internet issues.

Overview of the process
  • Create a web page to show the desired data.
  • Get data from SharePoint to download as pdf.
  • Prebuild and design your PDFfile.

Step1

The following is the data from my SharePoint list which I would like to convert into a PDF file.

Angular

Get the desired above data from SharePoint list and display in the web page, as below.

Angular

This is how we display the data in a web page. And, the same way, we are going to make it as a PDF file.

HTML code for the above UI

Here is the HTML code for the look and feel of the above webpage.

  1. <body ng-app="MyApp" ng-controller="MyController">  
  2.     <div class="container-fluid">  
  3.         <div class="form-horizontal col-lg-12 col-md-12 col-sm-12 col-xs-12"> <br/>  
  4.             <div id="HideAftrSuccess">  
  5.                 <div id="HeaderTop" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">  
  6.                     <h3 class="DivPad"><strong>Requisition Form</strong></h3>  
  7.                 </div>  
  8.                 <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 Specifications">Order Information    </div>  
  9.                 <div class="form-group"> <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Order From:</label>  
  10.                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <input class="form-control" value={{OrderFrom}} type="text" readonly/>  
  11.                         <!--<p>{{getRandomSpan}}</p>-->  
  12.                     </div> <label class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></label> <label class="col-lg-2 col-md-2 col-sm-2 col-xs-2">PO Number:</label>  
  13.                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <input class="form-control" value={{PONumber}} type="text" readonly/> </div>  
  14.                 </div>  
  15.                 <div class="form-group"> <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Confirmed To:</label>  
  16.                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <input class="form-control" value={{ConfirmedTo}} type="text" readonly/> </div> <label class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></label> <label class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Facility:</label>  
  17.                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <input class="form-control" value={{Facility}} type="text" readonly/> </div>  
  18.                 </div>  
  19.                 <div class="form-group"> <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Date Required:</label>  
  20.                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <input class="form-control" value={{DateRequired|date}} type="text" readonly/> </div> <label class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></label> <label class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Ship Via:</label>  
  21.                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <input class="form-control" value={{ShipVia}} type="text" readonly/> </div>  
  22.                 </div>  
  23.                 <div class="form-group"> <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Deliver To:</label>  
  24.                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <input class="form-control" value={{DeliverTo}} name="DeliverTo" type="text" readonly/> </div> <label class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></label> <label class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Requisition Date:</label>  
  25.                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <input class="form-control" name="RequisitionDate" value={{RequisitionDate|date}} type="text" readonly/> </div>  
  26.                 </div>  
  27.                 <div class="form-group"> <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Requisitioned by:</label>  
  28.                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">  
  29.                         <p>{{RequisitionedBy}}</p>  
  30.                     </div> <label class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></label> <label class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Approver:</label>  
  31.                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">  
  32.                         <p>-</p>  
  33.                     </div>  
  34.                 </div>  
  35.                 <div class="form-group"> <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Material For(Please Explain):</label>  
  36.                     <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"> <textarea class="form-control" readonly>{{MaterialFor}}</textarea> </div>  
  37.                 </div>  
  38.                 <hr id="HrLine"> </hr>  
  39.                 <div class="form-group">  
  40.                     <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"></div>  
  41.                     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><button type="button" ng-click="savePdfSample()" class="btn btn-warning">Download pdf</button></div>  
  42.                 </div>  
  43.             </div>  
  44.         </div>  
  45.     </div>  
  46. </body> 

Step 2

Script code for retrieving the data from SharePoint list

This is the script code for retrieving the desired data from the SharePoint list using Angular with REST call.

  1. $.ajax({  
  2.     url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('RequisitionOrders')/Items(" + GetUrlKeyValue("itemid") + ")?$select=*&$expand=RequisitionedBy&$select=RequisitionedBy/Title,RequisitionedBy/ID",  
  3.     method: "GET",  
  4.     async: false,  
  5.     headers: {  
  6.         "Accept": "application/json;odata=verbose"  
  7.     },  
  8.     success: function(data) {  
  9.         //Get all Items Start  
  10.         $(data.d).each(function(cos, currentRow) {  
  11.             $scope.OrderFromId = currentRow.ID;  
  12.             $scope.OrderFrom = currentRow.OrderFrom;  
  13.             $scope.PONumber = currentRow.PONumber;  
  14.             $scope.ConfirmedTo = currentRow.ConfirmedTo;  
  15.             $scope.Facility = currentRow.Facility;  
  16.             $scope.DateRequired = currentRow.DateRequired;  
  17.             $scope.ShipVia = currentRow.ShipVia;  
  18.             $scope.RequisitionedBy = currentRow.RequisitionedBy.Title;  
  19.             $scope.DeliverTo = currentRow.DeliverTo;  
  20.             $scope.RequisitionDate = currentRow.RequisitionDate;  
  21.             $scope.MaterialFor = currentRow.MaterialFor;  
  22.         })  
  23.     },  
  24.     error: function(sender, args) {  
  25.         console.log(args.get_message());  
  26.     }  
  27. });  

Step3

  • Prebuild and design your pdf file as you desired.
  • Keep ready the PDF design and hide it until you download.
  • Click on “Download PDF” button. It generates the pdf file as below.

    Angular

HTML code for the above PDF

This is the HTML code for the above look and feel. Here, the data is retrieved from the SharePoint list which we wanted to generate as a PDF file.

  1. <div id="PdfDiv" style="display:none;">  
  2.     <div style="width:594px;">  
  3.         <div><img style="text-align: left;height:20;width:90" src="/teams/mahipal/SiteAssets/Billing Form/Images/samDongLogo.jpg" /><strong style="text-align:right;border:1px solid;margin-left:350px;padding: 7px 42px">SDO</strong></div>  
  4.         <div style="text-align: right;padding-right: 18px;">  
  5.             <h3 style="text-align: center;font-family: arial;"><strong>REQUISITION</strong></h3>  
  6.         </div>  
  7.         <!-- <div style="background-color: #072a60;color: beige;padding-top: 2px;padding-bottom: 2px;">Order Information </div-->  
  8.         <div class="form-group">  
  9.             <table style="width:100%">  
  10.                 <tr>  
  11.                     <td style="width:20%"><span style="font-weight:700;">Order From:</span></td>  
  12.                     <td style="width:20%"><label>{{OrderFrom}}</label></td>  
  13.                     <td style="width:20%"><label style="font-weight:700;">PO Number:</label></td>  
  14.                     <td style="width:20%"><label>{{PONumber}}</label></td>  
  15.                 </tr>  
  16.                 <tr>  
  17.                     <td style="width:20%"><label style="font-weight:700">Confirmed To:</label></td>  
  18.                     <td style="width:20%"><label>{{ConfirmedTo}}</label></td>  
  19.                     <td style="width:20%"><label style="font-weight:700">Facility:</label></td>  
  20.                     <td style="width:20%"><label>{{Facility}}</label></td>  
  21.                 </tr>  
  22.                 <tr>  
  23.                     <td style="width:20%"><label style="font-weight:700">Date Required:</label></td>  
  24.                     <td style="width:20%"><label>{{DateRequired|date}}</label></td>  
  25.                     <td style="width:20%"><label style="font-weight:700">Ship Via:</label></td>  
  26.                     <td style="width:20%"><label>{{ShipVia}}</label></td>  
  27.                 </tr>  
  28.                 <tr>  
  29.                     <td style="width:20%"><label style="font-weight:700">Deliver To:</label></td>  
  30.                     <td style="width:20%"><label>{{DeliverTo}}</label></td>  
  31.                     <td style="width:20%"><label style="font-weight:700">Requisition Date:</label></td>  
  32.                     <td style="width:20%"><label>{{RequisitionDate|date}}</label></td>  
  33.                 </tr>  
  34.                 <tr>  
  35.                     <td style="width:20%"><label style="font-weight:700">Requisitioned by:</label></td>  
  36.                     <td style="width:20%"><label>{{RequisitionedBy}}</label></td>  
  37.                     <td style="width:20%"><label style="font-weight:700">Approver:</label></td>  
  38.                     <td style="width:20%"><label>-</label></td>  
  39.                 </tr>  
  40.             </table>  
  41.         </div>  
  42.         <!--<div style="background-color: #072a60;color: beige;padding-top: 2px;padding-bottom: 2px;">Item Information </div--><input style="background-color:#ffffff;border-color:#ffffff" type="button" ng-click="addReservation()" />  
  43.         <!--hr></hr-->  
  44.         <div class="form-group"> <label style="font-weight:700">Material For:</label> <label style="width:594px;">{{MaterialFor}}</label> </div>  
  45.         <!--hr></hr-->  
  46.     </div>  
  47. </div>  
  • The HTML code of the PDF file is hidden by using “style= display:none” tag.
  • Please use the inline style tags to build your PDF file as above.
Code for “Download PDF” button

  1. $scope.savePdfSample = function() {  
  2.     var pdf = new jsPDF('p', 'pt', 'letter');  
  3.     var canvas = pdf.canvas  
  4.     canvas.height = 72 * 15;  
  5.     canvas.width = 72 * 15;  
  6.     var html = $("#PdfDiv").html();  
  7.     var options = {  
  8.         pagesplit: true  
  9.     };  
  10.     html2pdf(html, pdf, function(pdf) {  
  11.         pdf.save('RequisationForm.pdf');  
  12.     });  
  13. }  

References for PDF files

These are the needed JS files to generate the SharePoint list data into a PDF file.

  1. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>  
  2. <script type="text/javascript" src="/teams/mahipal/SiteAssets/Billing Form/Scripts/Pdf.js"></script> 

See the results on screen.

  • Retrieve SharePoint list item and display in webpage, as below.

    Angular
  • Click on “Download PDF”.

    Angular

A file has been downloaded.

  • Let’s open the downloaded file.

    Angular

Hence, we have downloaded the PDF successfully for the desired SharePoint list item.

Conclusion

In this article, we learned how to generate a PDF file from a SharePoint list item using AngularJS. This will help us to take out a particular SharePoint list item into a PDF file to make a hard copy.


Similar Articles