HTML Custom Print Button

HTML & CSS
1

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.

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
3

Excuse accepted, and a modification is gently supplied. :winky:

<!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
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.