Overview
The GlobalPrintOptions interface defines the default configuration options for the print plugin. These options are set when installing the plugin and serve as defaults for all print operations unless overridden by PrintOptions.
Properties
Default window name for all print windows. Determines the target window for print operations.
specs
string[] | { width?: number; height?: number }
Default window specifications for all print windows. Can be either:
- An array of window feature strings (e.g.,
['width=800', 'height=600'])
- An object with
width and height properties in pixels
Default array of custom CSS styles to apply to all printed content. Each string should be valid CSS.Example:styles: [
'body { font-family: Arial, sans-serif; }',
'@media print { .no-print { display: none; } }'
]
Default delay in milliseconds before triggering the print dialog. Allows time for content and styles to load.
Default setting for whether to automatically close print windows after printing completes or is cancelled.
Default title for all print windows. This will appear in the browser tab and printed page header unless overridden.
Default setting for whether to preserve original page styles when printing. If false, only custom styles will be applied.
Usage Examples
Basic Plugin Installation
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import App from './App.vue';
const app = createApp(App);
app.use(VuePrintIt, {
name: '_blank',
timeout: 1000,
autoClose: true,
preserveStyles: true
});
app.mount('#app');
Custom Global Styles
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import App from './App.vue';
const app = createApp(App);
app.use(VuePrintIt, {
styles: [
'body { font-family: "Helvetica Neue", Arial, sans-serif; }',
'h1, h2, h3 { color: #2c3e50; }',
'.no-print { display: none; }',
'@page { margin: 2cm; }'
],
windowTitle: 'My Application - Print',
timeout: 1500
});
app.mount('#app');
Corporate Branding Configuration
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import App from './App.vue';
const app = createApp(App);
app.use(VuePrintIt, {
windowTitle: 'Acme Corp',
styles: [
'@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");',
'body { font-family: "Roboto", sans-serif; color: #333; }',
'.logo { width: 200px; margin-bottom: 20px; }',
'.header { border-bottom: 2px solid #007bff; padding-bottom: 10px; }',
'@page { margin: 1.5cm; }'
],
timeout: 2000,
autoClose: true,
preserveStyles: true
});
app.mount('#app');
Custom Window Specifications
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import App from './App.vue';
const app = createApp(App);
// Using object syntax
app.use(VuePrintIt, {
specs: {
width: 1024,
height: 768
}
});
// OR using array syntax
app.use(VuePrintIt, {
specs: [
'width=1024',
'height=768',
'menubar=no',
'toolbar=no',
'location=no',
'status=no'
]
});
app.mount('#app');
Minimal Styles Configuration
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import App from './App.vue';
const app = createApp(App);
// Don't preserve original styles, use only custom print styles
app.use(VuePrintIt, {
preserveStyles: false,
styles: [
'body { margin: 0; padding: 20px; font-family: serif; }',
'img { max-width: 100%; }',
'table { border-collapse: collapse; width: 100%; }'
]
});
app.mount('#app');
Relationship with PrintOptions
Global options serve as defaults that can be overridden on a per-print basis:
// Global configuration
app.use(VuePrintIt, {
timeout: 1000,
autoClose: true,
styles: ['body { font-family: Arial; }']
});
// Later in a component - override specific options
import { usePrint } from 'vue-print-it';
const { print } = usePrint();
// This print will use global timeout (1000ms) and autoClose (true)
// but override the styles
await print(element, {
styles: ['body { font-family: "Times New Roman"; }']
});
TypeScript Usage
import { createApp } from 'vue';
import VuePrintIt, { GlobalPrintOptions } from 'vue-print-it';
import App from './App.vue';
const app = createApp(App);
const printConfig: GlobalPrintOptions = {
name: '_blank',
timeout: 1500,
autoClose: true,
windowTitle: 'My App',
styles: [
'body { font-family: Arial, sans-serif; }'
],
preserveStyles: true
};
app.use(VuePrintIt, printConfig);
app.mount('#app');
See Also
