CODEWITHSUNDEEP
jqueryhtml
Imrul.H
Imrul.H

Reputation: 5870

Print HTML markup using jQuery

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

Upvotes: 0

Views: 341

Answers (1)

crafter
crafter

Reputation: 6296

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?

Upvotes: 1

Related Questions