fix: Print Preview UX

- Show footer on bottom
- Show message indicating that print may go into multiple pages

frappe/public/js/frappe/dom.js

@@ -220,6 +220,16 @@ frappe.dom = {
 			};
 			reader.readAsDataURL(file_obj);
 		});
+	},
+	pixel_to_inches(pixels) {
+		const div = $('<div id="dpi" style="height: 1in; width: 1in; left: 100%; position: fixed; top: 100%;"></div>');
+		div.appendTo(document.body);
+
+		const dpi_x = document.getElementById('dpi').offsetWidth;
+		const inches = pixels / dpi_x;
+		div.remove();
+
+		return inches;
 	}
 }
 

frappe/public/js/frappe/form/print.js

@@ -136,22 +136,40 @@ frappe.ui.form.PrintPreview = Class.extend({
 	preview: function () {
 		var me = this;
 		this.get_print_html(function (out) {
-			me.wrapper.find(".print-format").html(out.html);
+			const $print_format = me.wrapper.find(".print-format");
+			$print_format.html(out.html);
 			me.show_footer();
 			me.set_style(out.style);
+
+			const print_height = $print_format.get(0).offsetHeight;
+			const $message = me.wrapper.find(".page-break-message");
+
+			const print_height_inches = frappe.dom.pixel_to_inches(print_height);
+			// if contents are large enough, indicate that it will get printed on multiple pages
+			// Maximum height for an A4 document is 11.69 inches
+			if (print_height_inches > 11.69) {
+				$message.text(__('This may get printed on multiple pages'));
+			} else {
+				$message.text('');
+			}
 		});
 	},
 	show_footer: function() {
 		// footer is hidden by default as reqd by pdf generation
 		// simple hack to show it in print preview
+		this.wrapper.find('.print-format').css({
+			display: 'flex',
+			flexDirection: 'column'
+		});
 		this.wrapper.find('.page-break').css({
 			'display': 'flex',
-			'flex-direction': 'column'
+			'flex-direction': 'column',
+			'flex': '1'
 		});
 		this.wrapper.find('#footer-html').attr('style', `
 			display: block !important;
 			order: 1;
-			margin-top: 20px;
+			margin-top: auto;
 		`);
 	},
 	printit: function () {

frappe/public/js/frappe/form/templates/print_layout.html

@@ -31,6 +31,7 @@
 	<div class="print-preview-wrapper">
         <div class="print-preview">
 		    <div class="print-format"></div>
-        </div>
+		</div>
+		<div class="page-break-message text-muted text-center text-medium margin-top"></div>
     </div>
 </div>