Convert single SharePoint List Item data to a PDF file with JavaScript. All client side.
/* | |
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.') | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment