PrintPreview

A web component for print preview and page layout control with template support.

Installation

``bash
npm install @browser.style/print-preview
`

Usage

`javascript
import '@browser.style/print-preview';
`

`html





font-family="ff-humanist"
font-size="medium"
lang="en"
margin-bottom="15"
margin-left="20"
margin-right="20"
margin-top="15"
orientation="portrait"
paper-size="A4"
template="invoice">

`

Attributes

- font-family: Font family preset (default: 'ff-inherit')
- font-size: Font size preset (default: 'medium')
- images: Image handling ('show', 'hide', 'outline')
- lang: Language code (default: 'en')
- margin-bottom: Bottom margin in mm (default: '10mm')
- margin-left: Left margin in mm (default: '10mm')
- margin-right: Right margin in mm (default: '10mm')
- margin-top: Top margin in mm (default: '10mm')
- orientation: Page orientation ('portrait', 'landscape')
- paper-size: Paper format ('A4', 'A5', 'letter', etc.)
- template: Template name for content rendering

Methods

- preview(): Show print preview dialog
- print(): Open browser print dialog
- addTemplate(name, template, settings): Add custom template
- setContent(html): Update content directly

Templates

`javascript
const preview = document.querySelector('print-preview');

// Add custom template
preview.addTemplate('invoice', data =>

${data.title}

${data.items.map(item =>




).join('')}

${item.name}

${item.price}

, {
'paper-size': 'A4',
'orientation': 'portrait',
'margin-top': '20',
'font-family': 'ff-humanist'
});

// Use template
preview.data = {
title: 'Invoice #123',
items: [
{ name: 'Item 1', price: '$10' },
{ name: 'Item 2', price: '$20' }
]
};
`

Events

- beforetoggle: Fired before preview dialog opens/closes
- beforeprint: Fired before print dialog opens
- afterprint: Fired after print dialog closes

Keyboard Shortcuts

- Ctrl/Cmd + P`: Open print dialog when preview is open