一、打印功能实现基础

1.1 插件选择与安装

在Vue生态中实现打印功能，推荐使用轻量级插件vue-print-nb。该插件基于浏览器原生打印API封装，支持局部打印、页眉页脚定制等核心功能。安装命令如下：

npm install vue-print-nb --save

对于TypeScript项目，建议同时安装类型声明文件：

npm install @types/vue-print-nb -D

1.2 全局注册配置

在项目入口文件（通常为main.js）中完成插件注册：

import Print from 'vue-print-nb'
Vue.use(Print, {
  globalPrint: false // 禁用全局打印按钮（可选）
})

该配置支持通过globalPrint参数控制是否全局注入打印方法，生产环境建议保持默认值false以避免污染全局命名空间。

二、核心功能实现

2.1 打印按钮绑定

通过v-print指令绑定打印触发元素，支持直接传递打印配置对象或引用data中的配置：

<!-- 方式1：直接配置 -->
<el-button v-print="{ id: 'print-area' }">打印当前区域</el-button>
<!-- 方式2：引用data配置 -->
<el-button v-print="printConfig">打印配置项</el-button>

2.2 打印区域定义

被打印内容需通过id属性标识，建议采用语义化命名：

<div id="financial-report">
  <!-- 报表内容 -->
</div>

对于表格类数据，推荐结合Element UI的表格组件：

<el-table 
  id="data-table"
  :data="tableData"
  border
  style="width: 100%">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="amount" label="金额" sortable></el-table-column>
</el-table>

三、高级配置技巧

3.1 打印样式优化

浏览器默认打印样式可能与屏幕显示存在差异，需通过@media print进行针对性优化：

@media print {
  body * {
    visibility: hidden;
  }
  #print-area, #print-area * {
    visibility: visible;
  }
  #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  /* 隐藏分页符 */
  tr {
    page-break-inside: avoid;
  }
}

3.2 完整配置示例

data() {
  return {
    printConfig: {
      id: 'financial-report', // 必填，打印区域ID
      popTitle: '2023年度财务报告', // 页眉标题
      extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>', // 头部元信息
      extraCss: 'https://example.com/print.css', // 外部样式表
      standard: 'html5', // 打印标准
      beforeOpenCallback(vue) { // 打开前回调
        console.log('打印窗口即将打开', vue)
      },
      clickMounted(vue) { // 点击事件回调
        console.log('打印按钮被点击', vue)
      }
    }
  }
}

四、常见问题解决方案

4.1 打印内容截断

当内容超出单页时，可通过以下方式优化：

分页控制：使用CSS的page-break-after属性
```
.page-break {
page-break-after: always;
}
```

动态计算高度：通过JavaScript监听内容变化

mounted() {
window.addEventListener('resize', this.adjustPrintHeight)
},
methods: {
adjustPrintHeight() {
 const contentHeight = document.getElementById('print-area').scrollHeight
 // 根据高度调整布局
}
}

4.2 复杂布局处理

对于包含图表、多表格的复杂布局，建议：

将打印区域拆分为多个独立模块
为每个模块配置单独的打印参数

使用v-if控制打印时显示的内容

<div id="chart-container" v-if="isPrinting">
<!-- 图表组件 -->
</div>

五、性能优化建议

按需加载：对于大型报表，采用虚拟滚动技术减少DOM节点
图片优化：打印前将图片转换为base64编码减少HTTP请求
数据分片：超过1000行的数据建议分页打印
Web Worker：将复杂计算移至Web Worker避免阻塞UI线程

六、替代方案对比

方案	适用场景	优势	劣势
vue-print-nb	中小型项目	配置简单，支持局部打印	自定义样式能力有限
html2canvas	复杂布局	可精确控制样式	性能消耗较大
浏览器原生API	简单需求	无依赖，兼容性好	功能较为基础

七、最佳实践总结

开发阶段：使用Chrome的打印预览功能进行调试
生产环境：提供打印按钮和快捷键（Ctrl+P）两种触发方式
兼容性：测试主流浏览器的打印表现（Chrome/Firefox/Edge）
用户体验：添加打印加载状态提示，避免用户误操作

通过以上技术方案的实施，开发者可以构建出稳定、高效的Vue打印功能模块。实际项目中，建议根据业务需求选择合适的配置组合，对于金融、医疗等对打印质量要求较高的行业，建议增加打印前的预览确认环节，确保输出效果符合业务规范。

Vue页面打印功能实现全攻略：从基础配置到高级优化