Adding a Print Button to Rich Forms
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
-
Hello Joe Shearer
According to your question you can use one of next two ways:
1. You can add Script Editor Web Part (open form and go to Edit mode) and use next code in it:
//Button Name
<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 type="text/javascript">
(function(){
$('#create_pdf').on('click',function(){
$('body').scrollTop(0);
createPDF();
return false;
});
//create pdf
function createPDF(){
//Selector used to Print only Form without Ribbon and Navigation
html2canvas(".ard-formwebpart.ms-rteKeepStyles", { onrendered: function (canvas) {
var imgData = canvas.toDataURL('image/png');
//Third parameter is Page Size
var doc = new jsPDF('p', 'mm', 'a4');
doc.addImage(imgData, 'PNG', 10, 10);
//Name of PDF File.
doc.save('sample-file.pdf');
}
});
}
}());
</script>2. You can use Script Editor Web Part to add needed script to form both with button that you can insert into your customized form.
To add script Editor Web Part open form and go to Edit mode, then use next code in it:
<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>To add Button with Print to PDF functionality into customized form follow next:
1. Open form and go to Edit mode. Select Rich Forms Tab and then find dropdown 'Button and Link' on it. Select 'Button with Action'.
2. Select inserted button on you form and go to Behavior Tab.
3. Add Execute Script action to button in Button/Link Actions with following code (screenshot with it attached):
$('body').scrollTop(0);
createPDF();
return false;
function createPDF()
{
html2canvas($(".ard-formwebpart.ms-rteKeepStyles"), {
onrendered: function (canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'mm', 'a4');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
}Hope it will help)
Best regards,
Vladyslav Noskov
0
Please sign in to leave a comment.
Comments
1 comment