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

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

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>
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.

A file has been downloaded.

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.