Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.