Setup_and_DemonstrationA

Adding a Print Button to Rich Forms

Discussion created by Setup_and_DemonstrationA on Nov 23, 2017
Latest reply on Nov 29, 2017 by VladyslavN

Hi Skybow,

I’m hoping you can help me out regarding the function of a button. Feedback from users testing our forms has indicated that they require an option to print one of our forms.

The plan is therefore to try and add a button the form to allow either of the following options:-

1. Print to PDF

Or

2. Print (just a basic option to print)

It seems that both are possible but I am not sure how to achieve in Rich Forms. I have found ways to add via a script editor webpart but I am not sure how to adjust the coding for use on a button in Rich Forms (unfortunately I have little experience with code and so don’t know what to adjust/extract/add in order to make this work). Any advice that you can give would therefore be greatly appreciated!

Skybow site option for button to download to PDF:-

<button id="create_pdf">Download as PDF</button>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<script>

(function(){

$('#create_pdf').on('click',function(){

$('body').scrollTop(0);

createPDF();

return false;

});

//create pdf

function createPDF(){

html2canvas(document.body /*$(".ard-formwebpart")*/, {

onrendered: function (canvas) {

var imgData = canvas.toDataURL(

'image/png');

var doc = new jsPDF('p', 'mm');

doc.addImage(imgData, 'PNG', 10, 10);

doc.save('sample-file.pdf');

}

});

}

}());

</script>

Many Thanks,

Joe Shearer

Outcomes