Hello. Is there a way to use HTML to create a print button, where only the print button displays, and the HTML code contains the text to be printed?
So the result would be on the screen, the user would only see the print button, but when the print button was selected, the text would display for printing, but not display on the browser screen.
PaulOB
February 26, 2018, 6:18pm
2
You can use media queries and specify print as the media and then show the element you want just for print.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.print {
display:none
}
@media print {
.print {display:block}
.btn-print {display:none;}
}
</style>
</head>
<body>
<button onclick="javascript:window.print()" class="btn-print">Print</button>
<div class="print">
<p>I will only be printed</p>
</div>
</body>
</html>
(Excuse the onclick attribute as this is just a quick and dirty test).
1 Like
Excuse accepted, and a modification is gently supplied.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
</head>
<body>
<button class="btn-print">Print</button>
<script>
(function( w, d ) {
'use strict';
d.querySelector( '.btn-print' ).addEventListener( 'click', function() { w.print(); }, false );
}( window, document ));
</script>
</body>
</html>
coothead
2 Likes
system
Closed
May 29, 2018, 1:41am
4
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.