Print HTML markup using jQuery

Question

I want to print some HTML markup with jQuery. There is a print button. When the print button is clicked, the click event creates some markup. I want to print those markup on a printer. How is it possible without any plugin?
The button

<a class="print-button" href="#" title="Print"></a>

The jquery:

$('.print-button').click(function (){
    var markup = '<html><head><title>TODO supply a title</title>... ...';
    // now print the markup
})

I just put a bit of the markup; because its too long.
Important: The markup contains also css in it. Some content has background image

By print you mean like make a hardcopy or print it on-screen? — geomagas
– geomagas, Commented Oct 13, 2013 at 12:10
Print it on a printer. Just like the CTRL+P. But with customised markup. question edited — Imrul.H
– Imrul.H, Commented Oct 13, 2013 at 12:12

Community · Accepted Answer · 2017-05-23 10:31:45Z

1

You can achieve this, not easily with css.

You can specify css for printing. For example

@media print
  {
  div.to_print {font-family:times,serif;font-size:10px;}
  }

The trick here is to make everything. except what you want to print as hidden. This will guide you : CSS - Print view - Hide all elements except one div or How to only show certain parts with CSS for Print?

Them, in javascript, call the print function

window.print();

How do I programatically call the "Print Preview" screen using Javascript or Jquery?

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Oct 13, 2013 at 12:37

crafter

6,2971 gold badge39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

crafter Over a year ago

As an aside Imrul.H, I was able to provide 3 links to Stackoverflow with just a bit of searching. Your profile shows you are quite active on this site and have a good level of competence. How is it that you were not able to get some answers using basic searching?

Collectives™ on Stack Overflow

Print HTML markup using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related