Convert single SharePoint List Item data to a PDF file with JavaScript. All client side.

convert_sp_item_to_pdf.js

/*  
README

Code reads query string parameter (the ID of the SharePoint List Item), 
makes a GET request against SharePoint List for that item, then
converts response to a PDF file. PDF is dispalyed inline on the page,
or downloaded if IE.

*/


/* Assume the following are available

Polyfill for promises, IE11
https://github.com/taylorhakes/promise-polyfill

Axios for REST calls
https://github.com/axios/axios

pdfMake for conversion of data to PDF
https://github.com/bpampuch/pdfmake

*/



// Get Query String URL paramter - From https://davidwalsh.name/query-string-javascript
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

// Query string value for cardID
if(getUrlParameter('cardID').length > 0){
    var cardPersonID = getUrlParameter('cardID');
}


// Template for Generated PDF
var docDefinition = {
    content: [
        {
            // base64 encoded image could go here
            // width: 125
        },
        { 
            text: 'My PDF Text:', bold: true 
        },
        {
            // SharePoint list data injected here
        },  
        
    ],
    pageOrientation: 'landscape',
    pageSize: 'A4'
};



// Make SharePoint REST call
var listName = 'ACTUAL LIST NAME';
var siteName = 'SITE PATH';

// Query string passed in Axios GET request
var queryURL = siteName + "/_api/web/lists/getbytitle('" + listName + "')/items('" + cardPersonID + "')";


// As long as there is a query string, we execute GET call
if(cardPersonID !== undefined){
    
    axios.get(queryURL)
    .then(function (response) {
        
        // Map assigned data to some variables that pdfMake plugin can use
        var _uniqueID = "ID: " + response.data.Unique_x0020_ID,
            _title = "Title: " + response.data.Title,
            _body =  "Body: " + response.data.Body
           
        // Update pdfMake template with data from SharePoint list item
        docDefinition.content[2] =  
                { 
                ul:[
                _uniqueID,
                _title,
                _body,
                ]
            }
    })
    .catch(function (error) {
        // handle error
        alert('Something went wrong. Please refresh, or try the link again');
        console.log(error);
    })
    .then(function () {
        
        // If IE, we have to Download the PDF. More about this limitation in pdfMake docs
        if (window.document.documentMode) {
            pdfMake.createPdf(docDefinition).download();
            var _backgroundImg = document.getElementById('pdfCard')
            _backgroundImg.style.backgroundImage = "none"

        } else{
        
        // Everyone else gets it in the browser
            // Assumes there's a div that's ID'd as pdfCard.
            var pdfDocGenerator = pdfMake.createPdf(docDefinition);  
            pdfDocGenerator.getDataUrl(function (dataUrl) {
                var targetElement = document.querySelector('#pdfCard');
                var iframe = document.createElement('iframe');
                iframe.src = dataUrl;
                targetElement.appendChild(iframe);
            });
        }
    });


} else{

// If a non-real ID is passed in the query string
    alert('Error: My error message here.')
}