Vue Print Next

The preview interface can be customized using several parameters:

• preview: Boolean to enable/disable preview mode.
• darkMode: Boolean to enable dark mode in the preview.
• windowMode: Boolean to use a popup mode instead of fullscreen.
• defaultScale: Number to set the default zoom ratio (e.g., 0.8 for 80%).
• previewTools: Object to toggle specific toolbar buttons:
  • zoom: Boolean
  • theme: Boolean
  • fullscreen: Boolean

const printObj = {
  el: '#printMe',
  preview: true,
  darkMode: true,
  windowMode: true,
  defaultScale: 0.8,
  previewTools: {
    zoom: true,
    theme: true,
    fullscreen: false
  }
}

Control the physical print properties using paperSize and orientation.

Standard Sizes:

• paperSize: Set to 'A4', 'A3', etc.
• orientation: Set to 'portrait' or 'landscape'.

Custom Sizes: Set paperSize to 'custom' and provide a customSize object.

Custom Size Object Schema:

• width: Number
• height: Number
• unit: 'mm', 'cm', 'in', or 'px'

// Standard A4 Landscape
const printObj = {
  el: '#printMe',
  paperSize: 'A4',
  orientation: 'landscape',
  preview: true
}

// Custom Size
const printObj = {
  el: '#printMe',
  paperSize: 'custom',
  customSize: {
    width: '100',
    height: '150',
    unit: 'mm'
  },
  preview: true
}

Use VuePrintNext when your application requires:

• Printing formal documents like invoices, contracts, or manifests.
• Printing specific sections of a Single Page Application (SPA) instead of the entire viewport.
• Generating print previews with custom styling.
• Printing dynamically generated content or data fetched from remote URLs.

You can selectively disable features to control how users interact with the preview. For example, to disable zooming while keeping theme and fullscreen options available:

useVuePrintNext({
  el: '#print-content',
  preview: true,
  previewTools: {
    zoom: false,    // 禁用缩放
    theme: true,    // 允许切换主题
    fullscreen: true // 允许全屏切换
  }
});

Note: Even if all tool buttons are hidden, the close button will always remain visible so users can exit the preview window. Additionally, disabling a button only removes the UI toggle; you can still set the initial state of these features using other configuration options like darkMode, windowMode, or defaultScale.

To set up the vue2-demo project environment, use pnpm to install the necessary dependencies.

pnpm install

To use vue-print-next in Vue 3, register the printPlugin globally in your main.ts (or main.js) file. Once registered, you can use the v-print directive in your components to print either the entire page or specific elements by passing a CSS selector.

// 1. Global Registration in main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { printPlugin } from 'vue-print-next';

const app = createApp(App);
app.use(printPlugin);
app.mount('#app');

<!-- 2. Usage in Component -->
<template>
  <div>
    <!-- Prints the entire page -->
    <button v-print>打印整个页面</button>
    
    <!-- Prints the element with ID 'printMe' -->
    <button v-print="'#printMe'">打印局部内容</button>
    
    <div id="printMe">
      <p>这是需要打印的局部内容</p>
      <p>更多内容...</p>
    </div>
  </div>
</template>

If you are migrating from vue-print-nb or vue3-print-nb, vue-print-next is a complete rewrite that offers better TypeScript support, full Vue 3 Composition API support, and enhanced printing features like custom paper sizes and dark mode.

Key changes to note:

1. The id parameter is renamed to el (supports both CSS selectors and HTMLElement).
2. Import paths have changed: use printPlugin, vPrint, or VuePrintNext from vue-print-next.
3. The standard parameter now accepts 'strict' | 'loose' | 'html5' (defaults to 'html5').

npm install vue-print-next --save
# or
yarn add vue-print-next
# or
pnpm add vue-print-next