Member Avatar for jimmyjdesigns

I am sorry if this is addressed somewhere already but I cant find it.

I have read a lot about using a print stylesheet. I understand that and it sounds like a great plan.

However I cannot find any information about how to actually make the call to print a certain table or form. I dont want to print out the whole webpage, just a form that someone has filled out to print to there machine.

I am assuming that because I cannot find anything about this that I am just really dumb :( and can fully accept that.

Any help would be greatly appreciated.

James

  • 3 Contributors
  • 2 Replies
  • 107 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Asking to print just a single form or table is a common need. As suggested and pointed toward, a print-specific stylesheet is usually the cleanest long-term solution for controlling printed output. For an on-demand "print this element now" action, another reliable pattern is to render only that element into a temporary print context (an iframe or new window), ensure current form values are copied, inject the same styles, then call the browser print dialog.

A practical, browser-friendly approach is shown below: clone the target element, copy input/textarea/select values into the clone, create a hidden iframe, write the clone plus the page styles into the iframe, then invoke print. This keeps the original page untouched and avoids showing or hiding lots of page elements.

function printElement(elOrSelector) {
  var el = typeof elOrSelector === 'string' ? document.querySelector(elOrSelector) : elOrSelector;
  if (!el) return;
  var clone = el.cloneNode(true);

  var origs = el.querySelectorAll('input, textarea, select');
  var copies = clone.querySelectorAll('input, textarea, select');
  for (var i = 0; i < origs.length; i++) {
    var o = origs[i], c = copies[i];
    if (!c) continue;
    if (o.tagName.toLowerCase() === 'input') {
      if (o.type === 'checkbox' || o.type === 'radio') { c.checked = o.checked; if (o.checked) c.setAttribute('checked', 'checked'); }
      else { c.value = o.value; c.setAttribute('value', o.value); }
    } else if (o.tagName.toLowerCase() === 'textarea') { c.value = o.value; c.innerHTML = o.value; }
    else if (o.tagName.toLowerCase() === 'select') {
      for (var j = 0; j < o.options.length; j++) c.options[j].selected = o.options[j].selected;
    }
  }

  var iframe = document.createElement('iframe');
  iframe.style.position = 'absolute'; iframe.style.left = '-9999px';
  document.body.appendChild(iframe);
  var doc = iframe.contentWindow || iframe.contentDocument;
  if (doc.document) doc = doc.document;
  doc.open();
  doc.write('<!doctype html><html><head><title>Print</title>');
  var styles = document.querySelectorAll('link[rel="stylesheet"], style');
  for (var k = 0; k < styles.length; k++) doc.write(styles[k].outerHTML);
  doc.write('</head><body>' + clone.outerHTML + '</body></html>');
  doc.close();

  iframe.onload = function() {
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    iframe.contentWindow.onafterprint = function() { setTimeout(function() { document.body.removeChild(iframe); }, 0); };
  };

  setTimeout(function() { if (iframe.parentNode) { iframe.contentWindow.focus(); iframe.contentWindow.print(); document.body.removeChild(iframe); } }, 1000);
}

Notes and troubleshooting:

  • The print action should be triggered by a user gesture (click) to avoid popup blockers.
  • Cloning does not automatically copy current input values; the snippet above explicitly copies them.
  • External stylesheets are copied into the print frame so layout matches screen rules; alternate print-specific CSS can be added there.
  • Some browsers behave differently when closing a print window; listening for the print window's onafterprint is helpful (see browser docs).

For reference on the print API and media queries, consult the browser docs such as Window.print and .

Recommended Answers

All 2 Replies

Member Avatar for emhmk1

To be honest i have no idea but i would guess that in the print stylesheet you would 'hide' all elements apart from the ones you want to print out

setting display:hidden should work on most things. Also you should change your font, background image / colour and text colour to suit a printer.

Hope that helps...

Member Avatar for almostbob

what emhmk wrote
except set display:none; display hidden leaves whitespace where the element would be

<html><head><style type='text/css'>
@media print {  .dontprint { display:none; } }
@media screen { .dontshow { display:none; } }
</style></head><body>
<p class='dontprint'>this paragraph only displays onscreen</p>
<p class='dontshow'> this paragraph provides alternate text in the printed version but does not show onscreen</p>
<p> this paragraph both displays and prints, the form would go inside here</p>
<p class='dontprint'>this paragraph only displays onscreen</p>
<p class='dontshow'> this paragraph provides alternate text in the printed version but does not show onscreen</p>
</body></html>
Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.