Member Avatar for amjones

We are offering a coupon for a free soft drink to everyone who fills out our survey. When the user hits the Submit button at the end of the survey, a page appears with the coupon and a Print button. Currently, the whole page prints, including headings and links. I would like to print only the coupon. This is made trickier by the fact that the coupon is customized for each person with the person's name and the date. All help will be greatly appreciated.

  • 7 Contributors
  • 9 Replies
  • 267 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by fxm

Dani AI

Generated

As reported by , the goal is a printable coupon (name + date) while keeping the rest of the page off the printed sheet. Earlier suggestions covered the usual options: a separate print view from , a print stylesheet from , and opening a new window from . Those are all valid; the choice depends on reliability, security, and whether JavaScript may be disabled.

Most robust (recommended): generate a single-purpose printable resource on the server (clean HTML or a PDF). Serve it from a short‑lived token or session (avoid raw PII in query strings), or render a PDF with headless Chrome / wkhtmltopdf. This avoids popup blockers, works without JS, prints consistently across clients, and makes it easy to embed high‑quality barcodes/QRs and to expire or mark coupons as used.

Client-side option (works without a new browser tab): render only the coupon into an off‑screen iframe, wait for assets to load, call print on that frame, then remove it. This keeps the main UI intact and avoids many popup issues:

function printCoupon(selector) {
  var el = document.querySelector(selector);
  if (!el) return;
  var iframe = document.createElement('iframe');
  iframe.style.position = 'fixed';
  iframe.style.right = '0';
  iframe.style.bottom = '0';
  iframe.style.width = '1px';
  iframe.style.height = '1px';
  iframe.style.border = '0';
  iframe.setAttribute('aria-hidden', 'true');
  document.body.appendChild(iframe);

  var doc = iframe.contentWindow.document;
  doc.open();
  doc.write('<!doctype html><html><head><meta charset="utf-8"><title>Print</title>');
  Array.prototype.forEach.call(document.querySelectorAll('link[rel="stylesheet"]'), function(link){
    doc.write('<link rel="stylesheet" href="' + link.href + '">');
  });
  Array.prototype.forEach.call(document.querySelectorAll('style'), function(s){
    doc.write('<style>' + s.innerHTML + '</style>');
  });
  doc.write('</head><body>' + el.outerHTML + '</body></html>');
  doc.close();

  var win = iframe.contentWindow;
  function doPrint(){
    win.focus();
    win.print();
    setTimeout(function(){ document.body.removeChild(iframe); }, 800);
  }

  var imgs = win.document.querySelectorAll('img');
  if (!imgs.length) setTimeout(doPrint, 250);
  else {
    var loaded = 0, total = imgs.length;
    [].forEach.call(imgs, function(img){
      if (img.complete) { if (++loaded === total) doPrint(); }
      else img.onload = img.onerror = function(){ if (++loaded === total) doPrint(); };
    });
  }
}

Troubleshooting notes and best practices: ensure images/fonts finish loading before printing; many browsers suppress background colors—design the coupon so it looks correct without backgrounds or use print CSS rules that force color printing where supported; prefer server-issued tokens to avoid exposing personal data; include a QR/barcode to simplify redemption; test across Chrome, Firefox, Edge and Safari for margin and scaling differences. As noted, it isn’t possible to force a user's browser print dialog options (like “print selection”), so the page or generated file must already contain only the printable content.

Recommended Answers

All 9 Replies

Member Avatar for ~s.o.s~

Don't provide the print option on the coupon page. Instead create a 'print view' button at the bottom which will take the user to a page without any frills with just the coupon. I don't know what kind of technique or server side language you are using to persist the user information, but with a bit of hacking, you should be able to easily manage it.

Member Avatar for MidiMagic

You can't control functions which belong to the owner of the computer that is viewing your page.

Member Avatar for ~s.o.s~

> You can't control functions which belong to the owner of the
> computer that is viewing your page.
I don't think this is a question of 'controlling the functions of the owner', its rather a question which deals with the selective content which has to be served to the customer, so that the print function prints only the relevant part of the page.

Member Avatar for MidiMagic

What I was thinking is that he wanted to do the equivalent of "print selection" with his code making the selection and choosing the "print selection" option in the Print menu.

That belongs to the user.

Member Avatar for MidiMagic

I just checked out three coupon pages provided by well-known companies. All of them print the print button on the paper next to the coupon.

Member Avatar for plasmafire

No problem at all, just have the browser open a new page (upon clicking print)

window.open("your page here")
pass the parameters that you need..
i,e. the coupon is customized for each person with the person's name and the date

window.open("yourPage.htm?customername=xxx&date=yyy")

After the page renders with the coupon,
call
document.print() in yourPage.htm
and maybe close the window after the page prints. and voila, one happy customer :)

Member Avatar for stymiee

Better solution: use CSS. With CSS you can create a stylesheet dedicated to printing which is separate from the regular page display. This way you can use CSS to remove the parts of the page you don't want printed and even reformat the parts you do want printed. All major browser support this and it is not turned off as JavaScript often is.

Member Avatar for raphie

As stymiee said... CSS is the best option... example

@media print{
    #div_not_to_print{
        display:none;
    }

    #div_to_print{
        display:inline-block;
    }
}

If every element in your HTML has id or class declare not to print the desired id or class, so when they print the page only print the desire area only, even if JavaScript is turned off. It works with all the browser I used like IE, Safari, Firefox, Chrome, Opera and any Geiko Browser like Firefox.

Member Avatar for fxm

Unfortunately your comment comes almost three years too late for the participants in this thread.

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.