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.
   
   
   
   
3. Add a button “Upload PDF to SharePoint” In “people-main.txt” file.
   
   
   
   Output of the button in SharePoint Content Editor Web Part is given below.
   
   

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.




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



Open “all.js” from controllers/people.

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.

// to convert base64 string to blob and download pdf
functionsaveFiletoSP(byteArrays) {
        peopleService.fileUpload(byteArrays)
            .then(function(response) {
                console.log(response);
            });
    }
    // To upload PDF file to SharePoint library
$scope.uploadPdf = function() {
    // To create PDF and get the bytesarray
    var employees = $scope.personalDetails;
    varempList = [];
    angular.forEach(employees, function(value, key) {
        empList.push({
            Firstname: value.FirstName,
            Lastname: value.LastName,
            Address: value.Address
        });
    });
    var items = empList.map(function(item) {
        return [item.Firstname, item.Lastname, item.Address];
    });
    vardocDefinition = {
        pageOrientation: 'landscape',
        content: [{
            text: 'Employees List'
        }, {
            style: 'styleTable',
            table: {
                body: [
                    [{
                        text: 'Firstname',
                        style: 'header'
                    }, {
                        text: 'Lastname',
                        style: 'header'
                    }, {
                        text: 'Address',
                        style: 'header'
                    }, ],
                ].concat(items)
            }
        }],
        styles: {
            header: {
                bold: true,
                color: '#000',
                fontSize: 11
            },
            styleTable: {
                color: '#666',
                fontSize: 10
            }
        }
    }

    pdfMake.createPdf(docDefinition).getBuffer(function(buffer) {
        var utf8 = new Uint8Array(buffer); // Convert to UTF-8...
        varbinaryArray = utf8.buffer; // Convert to Binary...
        saveFiletoSP(binaryArray)
    });
};

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

Include fileUpload function in the Services, as shown below.

varfileUpload = function(doc) {
    varurl = "/_api/web/lists/GetByTitle('Documents')/RootFolder/Files/add(url='EmployeesDetails.pdf', overwrite=true)";
    returnbaseService.fileUploadRequest(doc, url);
};

Do not forget to include “fileUpload:fileUpload” in the return variables.



Now, go to baseSVC.js and include call SharePoint REST API to upload the PDF in the document library.

varfileUploadRequest = function(databuffer, url) {
    var deferred = $q.defer();
    $http({
        url: baseUrl + url,
        method: "POST",
        processData: false,
        data: databuffer,
        transformRequest: angular.identity,
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
            "Content-Type": undefined
        }
    }).success(function(result) {
        deferred.resolve(result);
    }).error(function(result, status) {
        deferred.reject({
            error: result,
            status: status
        });
    });
    returndeferred.promise;
};

Do not forget to add “fileUploadRequest: fileUploadRequest” to the return variable.

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

 

Output