Hi Bill,
You might be able to use JavaScript to move all the fields of a page onto one page when the print button is clicked. This answers post has a very detailed explanation of how to move fields from page to page. You will probably be able to amend this JavaScript to move sections from other pages onto the page with the print button when the print button is clicked. After that, you'll be able to use the window.print() method to print the entire page, now that all the fields have been moved onto one page.
I haven't quite worked out how to move the fields back to their respective pages after printing though, so you may want to look into a solution for that.
Another option you have is to handle the creation of a printable copy through the Process Diagram. If the form is the starting form, you can allow the users to print the page after they've submitted the form. In the Process Diagram, you can configure the Message Start Event to show the submitted form and give the users the option to Print it. This will automatically collate all the pages together.
If the form is a User Task, you can create a second user task which loads automatically if the same person is assigned. The Process Diagram would look something like this
This second user task (Printable Form) would display a read only form with the page breaks removed and a "print" button which acts like you've described above. You could even code the print button to also click the submit button and move forward with the process with the below code.
$(document).ready(function() {
$('.ClickPrint').on('click', function () {
window.print();
$('.Submit').click();
});
});
As for @████████'s problem with the print button submitting the form, if you add the type attribute to your button (type="button") it will no longer try to submit the form when the button is clicked. You can read more about that in this Answers post.
I hope this helps!