Creating PDF Dynamically And Uploading It To SharePoint Document Library Using AngularJS

In this article, we are going to see how the PDF can be created dynamically and to upload it to SharePoint, using AngularJS. There are few things, which are required to be done before getting into the PDF creation.

  1. Download PDFmake.js from GitHub.
  2. How to implement AngularJS in SharePoint and follow the steps for “AngularJs in Content Editor Web Part”. You will have the list of the folders and the files given below, while setting up AngularJS in SharePoint.

    SharePoint

  3. Add a button “Upload PDF to SharePoint” In “people-main.txt” file.

    SharePoint

    Output of the button in SharePoint Content Editor Web Part is given below.
    SharePoint

After creating AngularJS Application in SharePoint, using Content Editor Web Part, we need to start implementing creation dynamic PDF , , using PDFmake.js (upload it in “lib” folder in Style Library, as shown below) and refer PDFmake.js file in people-main.txt file.

SharePoint
SharePoint

AngularJS MVC files have to be uploaded in the relevant folders, as shown below.

SharePoint

Open “all.js” from controllers/people.

SharePoint

After doing the setup for AngularJS in SharePoint, we are going to startup with the PDF creation and upload to SharePoint.

Here is the main part of the PDF creation. Include the code given below to all.js controller.
  1. // to convert base64 string to blob and download pdf  
  2. functionsaveFiletoSP(byteArrays) {  
  3.         peopleService.fileUpload(byteArrays)  
  4.             .then(function(response) {  
  5.                 console.log(response);  
  6.             });  
  7.     }  
  8.     // To upload PDF file to SharePoint library  
  9. $scope.uploadPdf = function() {  
  10.     // To create PDF and get the bytesarray   
  11.     var employees = $scope.personalDetails;  
  12.     varempList = [];  
  13.     angular.forEach(employees, function(value, key) {  
  14.         empList.push({  
  15.             Firstname: value.FirstName,  
  16.             Lastname: value.LastName,  
  17.             Address: value.Address  
  18.         });  
  19.     });  
  20.     var items = empList.map(function(item) {  
  21.         return [item.Firstname, item.Lastname, item.Address];  
  22.     });  
  23.     vardocDefinition = {  
  24.         pageOrientation: 'landscape',  
  25.         content: [{  
  26.             text: 'Employees List'  
  27.         }, {  
  28.             style: 'styleTable',  
  29.             table: {  
  30.                 body: [  
  31.                     [{  
  32.                         text: 'Firstname',  
  33.                         style: 'header'  
  34.                     }, {  
  35.                         text: 'Lastname',  
  36.                         style: 'header'  
  37.                     }, {  
  38.                         text: 'Address',  
  39.                         style: 'header'  
  40.                     }, ],  
  41.                 ].concat(items)  
  42.             }  
  43.         }],  
  44.         styles: {  
  45.             header: {  
  46.                 bold: true,  
  47.                 color: '#000',  
  48.                 fontSize: 11  
  49.             },  
  50.             styleTable: {  
  51.                 color: '#666',  
  52.                 fontSize: 10  
  53.             }  
  54.         }  
  55.     }  
  56.   
  57.     pdfMake.createPdf(docDefinition).getBuffer(function(buffer) {  
  58.         var utf8 = new Uint8Array(buffer); // Convert to UTF-8...   
  59.         varbinaryArray = utf8.buffer; // Convert to Binary...  
  60.         saveFiletoSP(binaryArray)  
  61.     });  
  62. };  

Go to “people.js” under “Services/people”.

SharePoint

Include fileUpload function in the Services, as shown below.
  1. varfileUpload = function(doc) {  
  2.     varurl = "/_api/web/lists/GetByTitle('Documents')/RootFolder/Files/add(url='EmployeesDetails.pdf', overwrite=true)";  
  3.     returnbaseService.fileUploadRequest(doc, url);  
  4. };  
Do not forget to include “fileUpload:fileUpload” in the return variables.

SharePoint

Now, go to baseSVC.js and include call SharePoint REST API to upload the PDF in the document library.
  1. varfileUploadRequest = function(databuffer, url) {  
  2.     var deferred = $q.defer();  
  3.     $http({  
  4.         url: baseUrl + url,  
  5.         method: "POST",  
  6.         processData: false,  
  7.         data: databuffer,  
  8.         transformRequest: angular.identity,  
  9.         headers: {  
  10.             "accept""application/json;odata=verbose",  
  11.             "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,  
  12.             "Content-Type": undefined  
  13.         }  
  14.     }).success(function(result) {  
  15.         deferred.resolve(result);  
  16.     }).error(function(result, status) {  
  17.         deferred.reject({  
  18.             error: result,  
  19.             status: status  
  20.         });  
  21.     });  
  22.     returndeferred.promise;  
  23. };  
Do not forget to add “fileUploadRequest: fileUploadRequest” to the return variable.

SharePoint

Finally, now you need to click on the “Upload PDF to SharePoint” button in AngularJS page.
 
SharePoint

Output

SharePoint