[!info] related notes

• Vue MOC
• 打印 CSS · 打印媒体调试
• 既有打印功能实现记录

Vue Print Next

vue-print-next 是基于 vue3-print-nb 改写的打印插件，二者不是同一个包。发布包声明支持 Vue 2 和 Vue 3，下面示例使用 Vue 3；API 依据 2026-10-06 核对的 1.1.6 README 与类型声明。

它提供指定 DOM 区域、整个页面或 URL 内容的打印入口及预览界面，最终仍依赖浏览器打印。它不是直接生成 PDF 字节的排版引擎，也不保证屏幕预览与实际分页完全一致。

安装与局部指令

npm install vue-print-next

Vue 3 <script setup> 可直接导入 vPrint，不必同时全局注册：

<script setup>
import { vPrint } from 'vue-print-next'

const printConfig = {
  el: '#print-area',
  popTitle: '销售报告',
  preview: true,
  noPrintSelector: '.no-print',
}
</script>

<template>
  <button type="button" v-print="printConfig">打印报告</button>
  <div id="print-area">
    <h1>销售报告</h1>
    <p>待打印内容</p>
  </div>
</template>

全局注册使用具名导出 printPlugin：import { printPlugin } from 'vue-print-next'，然后在现有应用上调用 app.use(printPlugin)。不是默认导入 VuePrintNext 后传给 .use()。

手动调用与参数

import { VuePrintNext } from 'vue-print-next'

function printReport() {
  new VuePrintNext({ el: '#print-area', preview: true })
}

调用前应完成数据加载和 DOM 更新；Vue 响应式更新后可等待 nextTick()。不要假定所有回调都支持异步等待。

参数	1.1.6 中的含义
el	CSS 选择器或 HTMLElement；局部打印示例用 #print-area，不是 id 配置键
preview	是否使用插件预览界面
noPrintSelector	忽略元素的选择器字符串或字符串数组
extraCss	额外 CSS 文件地址字符串，多个地址用逗号分隔；不是 CSS 文本数组
extraHead	附加的 head 内容；只传入可信内容
standard	html5、loose、strict 文档类型；没有 image 模式
beforeOpenCallback / openCallback / closeCallback	打印窗口生命周期回调；不是 beforeEntry / afterEntry
url / asyncUrl	URL 打印入口；远程页面受同源策略和页面嵌入策略约束
paperSize / orientation / customSize	纸张尺寸与方向选项；实际输出仍需检查浏览器打印设置

预览还有 previewBeforeOpenCallback、previewOpenCallback。关闭打印窗口的回调不能证明用户已成功打印或保存 PDF。

排错顺序

1. 确认 el 能选中已经渲染的内容，且打印按钮不位于要复制的区域内，或已被忽略。
2. 检查复制后的文档是否加载了需要的 CSS、字体和图片；依赖外层祖先选择器的样式可能不再匹配。
3. 用 打印媒体模拟 调试规则，再检查实际打印预览、长表格和分页交界处。
4. 背景保留、页眉页脚和缩放由浏览器设置共同决定；break-inside: avoid 也不能保证超长内容不分割。

为表格添加打印边框可直接使用 @media print，不必依赖不存在的生命周期钩子。

来源

• 官方仓库与 README
• npm 发布包
• 1.1.6 类型声明