Printing a variable from javascript

Question

I have a variable named contract that has some HTML content received from the server. What is the simplest way to get this variable to get printed? By printing I mean hitting my button would: pop up the print window in Chrome with the document showing contents of my variable (since it is already a HTML formatted with CSS paged media, it looks a ready to be printed/saved pdf )

var contract = <HTML content>
$('#print').click(function () {
    <Pops up the print window of chrome with 'contract' opened>
})

I have browsed through answers that suggest using iframes (here, here ) and answers which suggest window pop-ups (here) but to be honest, it is a little confusing as it shouldn't really be very difficult. Could you please suggest a straightforward way to get this done?

Please have a look at: http://stackoverflow.com/questions/16894683/how-to-print-html-content-on-click-of-a-button-but-not-the-page — Frnak, Dec 11 '15 at 15:00
The solution here: http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only by romaninsh looks to be what you want. Basically it opens a new window, adds the content, and then calls the print function. You can't just directly print the variable as it doesn't work that way. — scrappedcola, Dec 11 '15 at 15:01
CSS Print Media... Add a block you want to be printed on the current page. Add CSS to only show that block when the page is printed. Pretty easy, no pop ups are needed. — epascarello, Dec 11 '15 at 15:17
@FrankProvost thats not a nice way to do it as it `document.body.innerHTML = originalContents;` does not work if there are dynamic contents on the page like buttons etc. — Core_Dumped, Dec 11 '15 at 15:17
@epascarello that upsets my CSS formatting on `contract` element. In the print preview, other HTML elements of my page are invisible but the `contract` does not occupy the full page. — Core_Dumped, Dec 11 '15 at 15:19

Praveen Kumar Purushothaman · Answer 1 · 2015-12-11T15:26:55.813

Let's say that the content of the HTML has the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contract</title>
  </head>
  <body>
    <h1>Contract</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam eum soluta ullam, in, qui iusto omnis rerum nisi alias, ducimus, dignissimos rem deserunt excepturi illo sint unde harum quas! Id.</p>
    <p>Signed: <br> Dated:</p>
  </body>
</html>

Get them stored in a value, say myHTML.

$("input").click(function () {
  myHTML = '';
  myWin = window.open("about:blank", "_blank");
  myWin.document.write(myHTML);
  myWin.print();
});

Update using CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Print Preview</title>
    <style>
      /* Start Praveen's Reset for Fiddle ;) */
      * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
      h1, h2, h3, h4, h5, h6, strong, b, th {font-weight: 600;}
      textarea, tt, pre, pre *, code, code * {font-family: 'Consolas';}
      /* End Praveen's Reset for Fiddle ;) */

      h1 {font-size: 1.2em;}
      h1, p {margin: 0 0 10px; line-height: 1.5;}
      .logo img {display: block; max-width: 75%; margin: 0 auto;}

      #dont-print {padding: 10px;}
      #dont-print h1 {background-color: #eef; padding: 5px 10px; margin: -10px -10px 10px;}
      #print-this {display: none;}

      @media print {
        #dont-print {display: none;}
        #print-this {margin: 10px; display: block;}
      }
    </style>
  </head>
  <body>
    <div id="dont-print">
      <div class="logo">
        <img src="https://www.microsoft.com/about/corporatecitizenship/en-us/downloadhandler.ashx?Id=07-03-02" alt="" />
      </div>
      <h1>Contract</h1>
      <p>Print this. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia dicta id, doloribus perspiciatis nam fugiat consequatur at inventore similique error excepturi praesentium vitae alias voluptatibus modi officiis atque dignissimos debitis.</p>
      <p>Signed: <br>Dated:</p>
    </div>
    <div id="print-this">
      <h1>Contract</h1>
      <p>Print this. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia dicta id, doloribus perspiciatis nam fugiat consequatur at inventore similique error excepturi praesentium vitae alias voluptatibus modi officiis atque dignissimos debitis.</p>
      <p>Signed: <br>Dated:</p>
    </div>
  </body>
</html>

Live Demo: http://output.jsbin.com/vuzixonajo

I had tried this. It gives blank pages in the print window. Seems window.print does not work in Chrome, I guess. http://stackoverflow.com/a/473270/1550852 says something on the same lines but uses iframes which I am not completely sure how to use it. :( — Core_Dumped, Dec 11 '15 at 15:16
@Core_Dumped Then I guess you are better good with having CSS solution. I will update the answer and let you know. — Praveen Kumar Purushothaman, Dec 11 '15 at 15:17
I have tried CSS solutions and explained how they do not work in one of my comments on the question. — Core_Dumped, Dec 11 '15 at 15:21
@Core_Dumped Check my answer anyway, and see if this approach might be good for you? — Praveen Kumar Purushothaman, Dec 11 '15 at 15:27
Your solution gives me the same issues which is: if my `contract` element is currently occupying top right of my webpage and the rest of the page is occupied by other elements then when I try to print this webpage, my `contract` stays at the top right of the print preview while the rest of the elements of the webpage are not visible. That is what I mean when I said that it screws up my CSS formatting. — Core_Dumped, Dec 14 '15 at 09:18

Printing a variable from javascript

1 Answers1