71

The JavaScript code window.print() can print the current HTML page.

If I have a div in an HTML page (for example, a page rendered from an ASP.NET MVC view), then I want to print the div only.

Is there any jQuery unobtrusive JavaScript or normal JavaScript code to implement this request?

Making it more clear, suppose the rendered HTML page is like:

<html xmlns="http://www.w3.org/1999/xhtml">

    <head id="Head" runat="server">
        <title>
            <asp:ContentPlaceHolder runat="server" ID="TitleContent" />
        </title>
    </head>

    <body>
            <div id="div1" class="div1">....</div>
            <div id="div2" class="div2">....</div>
            <div id="div3" class="div3">....</div>
            <div id="div4" class="div4">....</div>
            <div id="div4" class="div4">....</div>
        <p>
            <input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" />
        </p>
    </body>
</html>

Then I want to click on the Print button, only printing div3.

0

7 Answers 7

120

I would go about it somewhat like this:

<html>
    <head>
        <title>Print Test Page</title>
        <script>
            printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')
            function printDiv(divId) {
                window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;
                window.frames["print_frame"].window.focus();
                window.frames["print_frame"].window.print();
            }
        </script>
    </head>

    <body>
        <h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>
        <b>Div 1:</b> <a href="javascript:printDiv('div1')">Print</a><br>
        <div id="div1">This is the div1's print output</div>
        <br><br>
        <b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br>
        <div id="div2">This is the div2's print output</div>
        <br><br>
        <b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br>
        <div id="div3">This is the div3's print output</div>
        <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
    </body>
</html>
15
  • 2
    printDivCSS is just there if you need to format what you're printing with a stylesheet. If you don't want your printed text to be formatted with a stylesheet, then you don't need it. Commented Jul 13, 2009 at 21:58
  • 4
    I checked what the situation was. IE7 will print the active frame by default, so I have to focus() the frame. It won't let me focus() "visibility: hidden" content, so I had to remove that bit of style formatting. The frame already has a width, height, and frameborder of 0, so it's hidden even without the style formatting. This way, everything works. Oh, one final note, if a user tries to CTRL+F search the page, it's possible that their search will find matches inside the frame, matches they can't see. You'll have to blank the frame after they are done printing to fix that one. Commented Sep 5, 2009 at 20:46
  • 9
    @CodingWithStyle This answer would be much more useful if you explained your approach/solution rather than just providing the code. Commented Jan 26, 2016 at 19:57
  • 2
    This doesn't seem to work anymore - in Chrome at least. The print dialog opens before the CSS is applied to the iframe contents.
    – Turnip
    Commented Nov 3, 2016 at 17:31
  • 5
    window.frames["print_frame"].window.focus(); setTimeout(function() { window.frames["print_frame"].window.print(); }, 0); Commented Nov 30, 2016 at 4:22
32

Along the same lines as some of the suggestions you would need to do at least the following:

  • Load some CSS dynamically through JavaScript
  • Craft some print-specific CSS rules
  • Apply your fancy CSS rules through JavaScript

An example CSS could be as simple as this:

@media print {
  body * {
    display:none;
  }

  body .printable {
    display:block;
  }
}

Your JavaScript would then only need to apply the "printable" class to your target div and it will be the only thing visible (as long as there are no other conflicting CSS rules -- a separate exercise) when printing happens.

<script type="text/javascript">
  function divPrint() {
    // Some logic determines which div should be printed...
    // This example uses div3.
    $("#div3").addClass("printable");
    window.print();
  }
</script>

You may want to optionally remove the class from the target after printing has occurred, and / or remove the dynamically-added CSS after printing has occurred.

Below is a full working example, the only difference is that the print CSS is not loaded dynamically. If you want it to really be unobtrusive then you will need to load the CSS dynamically like in this answer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Print Portion Example</title>
    <style type="text/css">
      @media print {
        body * {
          display:none;
        }

        body .printable {
          display:block;
        }
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>

  <body>
    <h1>Print Section Example</h1>
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3">Div 3</div>
    <div id="div4">Div 4</div>
    <div id="div5">Div 5</div>
    <div id="div6">Div 6</div>
    <p><input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /></p>
    <script type="text/javascript">
      function divPrint() {
        // Some logic determines which div should be printed...
        // This example uses div3.
        $("#div3").addClass("printable");
        window.print();
      }
    </script>
  </body>
</html>
6
  • For FF, this solution will print the entire page with div3. For IE7, this solution will print the entire page but replace div3 with blank.
    – KentZhou
    Commented Sep 4, 2009 at 19:31
  • Which version of Firefox? When I tested this with IE it was with IE6 and it works correctly -- printing only "Div 3". Firefox 3.5.2 demonstrates the same behavior. Google Chrome 2.0.172.43 also demonstrates the same behavior. Maybe I don't understand your requirements. Commented Sep 4, 2009 at 20:30
  • THANKS. My scenario is: I put your suggest css @media print... into the site.css. My page is render as <body> <div class="fixed"> <div class="col1"> <div id="DivForPrint"> </div> </div> </div> </body> maybe the css is not correct for this case?
    – KentZhou
    Commented Sep 6, 2009 at 20:58
  • It's hard to say without seeing the CSS and page source myself. Can you post it to somewhere like jsbin.com? Commented Sep 7, 2009 at 2:39
  • This is the best solution if you need to print part of a page when that part of the page depends on JS, for example content inside tabs
    – sites
    Commented May 25, 2017 at 22:00
12

Try this JavaScript code:

function printout() {

    var newWindow = window.open();
    newWindow.document.write(document.getElementById("output").innerHTML);
    newWindow.print();
}
1
  • 1
    That just spewed an unformatted table onto a new tab for me. Nothing printed.
    – SteveCav
    Commented Aug 18, 2015 at 1:34
8
<div id="invocieContainer">
    <div class="row">
        ...Your html Page content here....
    </div>
</div>

<script src="/Scripts/printThis.js"></script>
<script>
    $(document).on("click", "#btnPrint", function(e) {
        e.preventDefault();
        e.stopPropagation();
        $("#invocieContainer").printThis({
            debug: false, // show the iframe for debugging
            importCSS: true, // import page CSS
            importStyle: true, // import style tags
            printContainer: true, // grab outer container as well as the contents of the selector
            loadCSS: "/Content/bootstrap.min.css", // path to additional css file - us an array [] for multiple
            pageTitle: "", // add title to print page
            removeInline: false, // remove all inline styles from print elements
            printDelay: 333, // variable print delay; depending on complexity a higher value may be necessary
            header: null, // prefix to html
            formValues: true // preserve input/form values
        });

    });
</script>

For printThis.js souce code, copy and pase below URL in new tab https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js

1
  • With this anser I don't need to invent a bicycle, thank you!
    – Akmal
    Commented Jan 24, 2020 at 12:28
4

You could use a print stylesheet, but this will affect all print functions.

You could try having a print stylesheet externalally, and it is included via JavaScript when a button is pressed, and then call window.print(), then after that remove it.

2
  • This would work, but with some modification to allow the page to "reset" after you've printed your target. (As you noted, this would be a problem.) For example, just before printing, open a modal window or some kind of overlay indicating that printing can now occur (or call window.print() right then) and then when user clicks OK or Close, the stylesheets can reset themselves.
    – Funka
    Commented Jul 2, 2009 at 2:01
  • Oh, also, you don't necessarily need to have an external CSS file loaded dynamically, you could have it pre-loaded but just adjust the classes on your target div or other container when ready to print. (And removing the classes when done.)
    – Funka
    Commented Jul 2, 2009 at 2:02
1

You could use jquery to do this.

$('#btnSubmit').click(function(){
    var divContent = $("#div3").html();
    var originalContents = $("body").html();

    $("body").empty().html(divContent );
    window.print();
    $("body").html(originalContents);
})
0

I had a problem where input controls were loosing their values when printing so I cooked up this code. This series of functions allows you to print either some static HTML snippet or the contents of a particular node and preserves input values and features hiding selected elements with the class "hideToPrint" and features a callback to modify the HTML just for the print so you can change things in other ways without messing with the original node. The only downside of this I know of is that the body looks like what you are printing while the print dialog is up.

This has only been tested on Chrome.

CSS:

@media print {
  .hideToPrint {
    display: none;
  }
}

JS:

/**
 * Takes the outerHTML of the element referenced by contentId
 * and applies the fnModifyHtml(printContents) to the 
 * outerHTML content if specified, and prints it.
 * Any content element that has the class "hideToPrint" will
 * be hidden for printing.
 * @param {string} contentId host element id
 * @param {function=} fnModifyHtml 
 */
async function as_printContent(contentId, fnModifyHtml=null) {
  const aHideToPrint = Array.from(document.getElementsByClassName('hideToPrint'));
  aHideToPrint.forEach((el) => {
    hide(el);
  });

  await as_printRawContent(ge(contentId), fnModifyHtml);
  aHideToPrint.forEach((el) => {
    show(el);
  });
}

/**
 * Asynchronously prints the raw content of an element.
 *
 * @param {Element|string} elContent - The element or HTML string to print.
 * @param {function} fnModifyHtml - A function to modify the printed HTML.
 * @return {Promise<void>} A promise that resolves when the printing is done.
 */
async function as_printRawContent(elContent, fnModifyHtml = null) {
  if (typeof(elContent) == 'string') {
    // this is HTML and needs to be placed into a temporary element
    const html = elContent;
    elContent = document.createElement('div');
    elContent.innerHTML = html;
  }
  const aBodyValues = saveNodeValues(document.body);
  const bodyHTML = document.body.innerHTML;

  const aPrintContentValues = saveNodeValues(elContent);
  let printContents = elContent.outerHTML;
  if (fnModifyHtml) {
    printContents = fnModifyHtml(printContents);
  }

  document.body.innerHTML = printContents;
  restoreNodeValues(document.body, aPrintContentValues);

  await delay(1);
  window.print();
  document.body.innerHTML = bodyHTML;
  restoreNodeValues(document.body, aBodyValues);

  addEventHandlers();
}

/**
 * Retrieve the values of all input, select, and textarea elements within a given node.
 *
 * @param {HTMLElement} node - The node to search for input elements.
 * @return {Array} An array of objects containing the id, value, and type of each input element.
 */
function saveNodeValues(node) {
  return Array.from(node.querySelectorAll('input, select, textarea')).map((el) => {
    if (!el.id) {
      console.assert(el.id, `Element ${el.outerHTML} has no id`);
    }
    return { 
      id: el.id, 
      value: (el.type == 'checkbox') ? el.checked : el.value, 
      type: el.type 
    };
  });
}

/**
 * Restores the values of the specified DOM elements based on the provided array of values.
 *
 * @param {Node} node - The root node from which the DOM elements will be searched.
 * @param {Array} aValues - An array of objects containing the id, value, and type of each element to be restored.
 * @param {string} aValues[].id - The id of the DOM element.
 * @param {any} aValues[].value - The value to be restored on the DOM element.
 * @param {string} aValues[].type - The type of the DOM element (e.g., 'checkbox', 'text', etc.).
 */
function restoreNodeValues(node, aValues) {
  aValues.forEach(({ id, value, type }) => {
    const el = ge(id);
    if (el) {
      if (type === 'checkbox') {
        el.checked = value ? 'checked' : '';
      } else {
        el.value = value;
      }
    }
  });
}

/**
 * Delays the execution of subsequent code for a specified amount of time.
 * @param {number} time The amount of time to delay in milliseconds.
 * @returns {Promise} A promise that resolves after the specified time has passed.
 */
async function delay(time) {
  return new Promise((resolve) => {
    setTimeout(resolve, time);
  });
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.