Skip to main content

​
Overview

The PrintOptions interface defines all configuration options available for individual print operations. These options can be passed to $print() or printComponent() methods to customize the printing behavior.

​
Properties

​
name
string
default:"_blank"
Window name for the print window. Determines the target window for the print operation.
​
specs
string[] | { width?: number; height?: number }
Window specifications for the print window. Can be either:
  • An array of window feature strings (e.g., ['width=800', 'height=600'])
  • An object with width and height properties in pixels
​
styles
string[]
Array of custom CSS styles to apply to the printed content. Each string should be valid CSS.Example:
styles: [
  'body { font-family: Arial, sans-serif; }',
  '.highlight { background-color: yellow; }'
]
​
timeout
number
default:"1000"
Delay in milliseconds before triggering the print dialog. Allows time for content and styles to load.
​
autoClose
boolean
default:"true"
Whether to automatically close the print window after printing completes or is cancelled.
​
windowTitle
string
Custom title for the print window. This will appear in the browser tab and printed page header.
​
preserveStyles
boolean
default:"true"
Whether to preserve the original page styles when printing. If false, only custom styles will be applied.
​
onBeforePrint
() => void | Promise<void>
Callback function executed before the print dialog opens. Can be synchronous or asynchronous.Example:
onBeforePrint: async () => {
  console.log('Preparing to print...');
  await fetchLatestData();
}
​
onAfterPrint
() => void | Promise<void>
Callback function executed after the print dialog closes. Can be synchronous or asynchronous.Example:
onAfterPrint: () => {
  console.log('Print completed');
  trackPrintEvent();
}
​
onPrintError
(error: Error) => void
Callback function executed when a print error occurs. Receives the error object as a parameter.Example:
onPrintError: (error) => {
  console.error('Print failed:', error.message);
  showErrorNotification(error);
}
​
useBridge
boolean
default:"false"
Whether to use the bridge plugin for direct printing. When true, requires the bridge plugin to be installed and configured.
​
printerName
string
Name of the specific printer to use with bridge printing. Only applicable when useBridge is true.
​
copies
number
default:"1"
Number of copies to print. Only applicable when using bridge printing (useBridge: true).
​
contentType
'html' | 'pdf'
default:"html"
Content type for bridge printing. Only applicable when using bridge printing (useBridge: true).
  • 'html': Print HTML content directly
  • 'pdf': Convert content to PDF before printing

​
Usage Examples

​
Basic Print with Custom Styles

<template>
  <div>
    <div ref="printArea">
      <h1>Invoice #12345</h1>
      <p>Customer details...</p>
    </div>
    <button @click="handlePrint">Print Invoice</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { usePrint } from 'vue-print-it';

const printArea = ref(null);
const { print } = usePrint();

const handlePrint = () => {
  print(printArea.value, {
    windowTitle: 'Invoice #12345',
    styles: [
      'body { font-family: Arial, sans-serif; }',
      'h1 { color: #333; }'
    ],
    timeout: 500,
    autoClose: true
  });
};
</script>

import { usePrint } from 'vue-print-it';

const { print } = usePrint();

const printReceipt = async () => {
  const element = document.getElementById('receipt');
  
  await print(element, {
    onBeforePrint: async () => {
      console.log('Loading latest data...');
      await fetchReceiptData();
    },
    onAfterPrint: () => {
      console.log('Print completed');
      logPrintEvent();
    },
    onPrintError: (error) => {
      console.error('Print failed:', error);
      showNotification('Print failed', 'error');
    }
  });
};

​
Bridge Printing (Direct to Printer)

import { usePrint } from 'vue-print-it';

const { print } = usePrint();

const printLabel = async () => {
  const label = document.getElementById('shipping-label');
  
  await print(label, {
    useBridge: true,
    printerName: 'Label Printer',
    copies: 2,
    contentType: 'html',
    timeout: 500
  });
};

​
Custom Window Specifications

import { usePrint } from 'vue-print-it';

const { print } = usePrint();

// Using object syntax
await print(element, {
  specs: { width: 800, height: 600 }
});

// Using array syntax
await print(element, {
  specs: [
    'width=800',
    'height=600',
    'menubar=no',
    'toolbar=no'
  ]
});

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us