print-page

A print button with optional toggle to disable VB print style optimizations.

Overview

The <print-page> component wraps window.print() in a progressive enhancement button. It auto-hides itself when printing and optionally lets users toggle VB’s print style optimizations on or off.

<print-page>Print this page</print-page>

Without JavaScript, the element renders as inert text. With JavaScript, it becomes a functional print button.

Attributes

Attribute Type Default Description
raw-toggle Boolean — If present, shows a checkbox labeled “Print without VB styles”
label String Element text or “Print this page” Custom button label

Raw Mode Toggle

When raw-toggle is present, the component adds a checkbox. If checked, it sets data-print-raw on the <html> element before opening the print dialog, which disables all VB print optimizations. The attribute is removed after printing.

<!-- With checkbox to disable VB print optimizations --> <print-page raw-toggle>Print this page</print-page>

This is useful for users who want to see the page print exactly as it appears on screen — with theme colors, shadows, and layout intact.

Custom Label

Set the button text via label or as the element’s text content.

<print-page label="Save as PDF"></print-page>

Usage in Context

Place the component wherever makes sense. It hides itself during printing automatically. Adding data-no-print is redundant but makes intent explicit.

<article> <h1>Quarterly Report</h1> <p>...</p> <footer> <print-page raw-toggle data-no-print>Print report</print-page> </footer> </article>

Demo

This article demo includes a <print-page raw-toggle>. Use the print button or Ctrl+P / Cmd+P.

More demos: Invoice, Report

Accessibility

  • The component renders a native <button> — fully keyboard accessible.
  • The raw-mode toggle uses a native <input type="checkbox"> inside a <label>.
  • The component sets role="group" on itself when both button and toggle are present.

Related