cnc-print
A button that opens a print window containing one element from the page, by id. It is a
cnc-button
with a print action attached — nothing more.
Quick start
Point contentid at the id of the element to print. Its
outerHTML
is copied into a new window, which then prints and closes itself.
Invoice #1042
This block is what gets printed — the button below is not part of it.
<div id="printable-invoice">…</div>
<cnc-print
contentid="printable-invoice"
label="Print invoice"
title="Invoice #1042"
></cnc-print>Usage guidance
Print plain content. Only a few built-in styles travel to the print window — your
stylesheets do not — so a section of headings, paragraphs and tables prints well and a
dashboard of widgets does not. Where the printed form matters, build a hidden element shaped for
the page and point contentid at that.
Check the id. A contentid matching nothing produces a console warning and a button
that appears to work and does not — there is no user-facing failure at all, so a typo here
survives testing easily.
The window opens through window.open, so a popup blocker can stop it silently.
Because the click is a direct user action most browsers allow it, but it is worth knowing when a
report of "the print button does nothing" arrives.