vue如何实现打印功能

发布时间：2022-05-05 18:10:27 作者：iii
来源：亿速云阅读：324

# Vue如何实现打印功能

## 前言

在现代Web应用开发中，打印功能是一个常见但容易被忽视的需求。无论是电商平台的订单打印、企业OA系统的报表输出，还是教育平台的学习资料下载，打印功能都扮演着重要角色。作为主流前端框架之一，Vue.js提供了多种实现打印功能的解决方案。

本文将全面介绍在Vue项目中实现打印功能的8种方法，从最简单的window.print()到专业的打印库，通过代码示例、原理分析和最佳实践，帮助开发者选择最适合自己项目的打印方案。

## 一、基础打印方案

### 1. 使用window.print()实现简单打印

`window.print()`是浏览器原生提供的打印API，也是最简单的打印实现方式。

```javascript
// 基本使用
methods: {
  handlePrint() {
    window.print()
  }
}

优点： - 零依赖，无需引入额外库 - 实现简单，一行代码即可调用

缺点： - 无法自定义打印样式 - 会打印整个页面内容 - 各浏览器表现不一致

进阶用法 - 打印指定区域：

<template>
  <div>
    <div id="printArea">
      <!-- 需要打印的内容 -->
    </div>
    <button @click="printSpecificArea">打印区域</button>
  </div>
</template>

<script>
export default {
  methods: {
    printSpecificArea() {
      const printContent = document.getElementById('printArea').innerHTML
      const originalContent = document.body.innerHTML
      
      document.body.innerHTML = printContent
      window.print()
      document.body.innerHTML = originalContent
    }
  }
}
</script>

2. 使用CSS控制打印样式

通过CSS媒体查询可以专门为打印设置样式：

/* 普通样式 */
.print-content {
  color: #333;
}

/* 打印专用样式 */
@media print {
  .no-print {
    display: none;
  }
  
  .print-content {
    font-size: 12pt;
    color: #000;
  }
  
  body {
    background: none;
    margin: 0;
    padding: 0;
  }
}

关键打印CSS属性： - page-break-before/page-break-after：控制分页 - size：定义页面尺寸 - @page：设置页边距等

二、专业打印解决方案

3. vue-print-nb插件

vue-print-nb是专为Vue设计的打印插件，使用简单且功能强大。

安装：

npm install vue-print-nb --save

基本使用：

import Print from 'vue-print-nb'

Vue.use(Print)

// 模板中使用
<button v-print="printObj">打印</button>
<div id="printContent">打印内容</div>

export default {
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '打印标题', // 打印配置
        extraCss: 'https://example.com/print.css'
      }
    }
  }
}

高级配置：

printObj: {
  id: 'printContent',
  beforeOpenCallback(vue) {
    console.log('打开打印预览前')
  },
  openCallback(vue) {
    console.log('打开打印预览后')
  },
  closeCallback(vue) {
    console.log('关闭打印预览')
  }
}

4. Print.js库集成

Print.js是一个功能丰富的JavaScript打印库，支持PDF、HTML、图片等多种打印格式。

安装：

npm install print-js --save

基本使用：

import printJS from 'print-js'

methods: {
  printPDF() {
    printJS({
      printable: '/docs/example.pdf',
      type: 'pdf',
      showModal: true
    })
  },
  
  printHTML() {
    printJS({
      printable: 'printContent',
      type: 'html',
      scanStyles: false,
      targetStyles: ['*'] // 继承所有样式
    })
  }
}

配置选项：

参数	说明
printable	打印内容ID或URL
type	pdf/html/image/json
header	自定义页眉
style	自定义CSS样式
scanStyles	是否扫描样式

三、高级打印技术

5. 打印优化与分页控制

表格分页示例：

@media print {
  table {
    page-break-inside: auto;
  }
  
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  
  thead {
    display: table-header-group;
  }
  
  tfoot {
    display: table-footer-group;
  }
}

避免内容截断：

@media print {
  div, p, h2 {
    page-break-inside: avoid;
  }
}

6. 打印事件监听

window.addEventListener('beforeprint', () => {
  console.log('打印前触发')
  this.prepareForPrint()
})

window.addEventListener('afterprint', () => {
  console.log('打印后触发')
  this.restoreAfterPrint()
})

四、特殊场景解决方案

7. 打印Canvas内容

const canvas = document.getElementById('myCanvas')
const dataURL = canvas.toDataURL('image/png')

printJS({
  printable: dataURL,
  type: 'image',
  header: 'Canvas打印'
})

8. 服务端打印方案

Node.js服务端打印示例：

const puppeteer = require('puppeteer')

async function printPDF(url) {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto(url, { waitUntil: 'networkidle0' })
  const pdf = await page.pdf({ format: 'A4' })
  await browser.close()
  return pdf
}

五、最佳实践与常见问题

性能优化建议

减少打印内容复杂度：简化DOM结构
使用打印专用样式表：避免加载不必要资源
懒加载打印资源：仅在需要时加载
合理使用分页：避免内容截断

常见问题解决

Q1：打印时背景色不显示？

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

Q2：如何设置横向打印？

@page {
  size: A4 landscape;
}

Q3：打印页眉页脚去除？

@page {
  margin: 0;
}

六、完整示例项目

下面是一个综合使用vue-print-nb和Print.js的完整组件示例：

<template>
  <div class="print-demo">
    <!-- 打印区域1 -->
    <div id="receipt" class="receipt-style">
      <h2>销售收据</h2>
      <table>
        <!-- 表格内容 -->
      </table>
    </div>
    
    <!-- 打印区域2 -->
    <div id="report" class="report-style">
      <!-- 报表内容 -->
    </div>
    
    <div class="no-print">
      <button @click="printReceipt">打印收据</button>
      <button v-print="reportPrintObj">打印报表</button>
      <button @click="printCanvas">打印图表</button>
    </div>
    
    <canvas id="salesChart"></canvas>
  </div>
</template>

<script>
import printJS from 'print-js'

export default {
  data() {
    return {
      reportPrintObj: {
        id: 'report',
        popTitle: '月度报表',
        extraCss: '/print-styles.css'
      }
    }
  },
  methods: {
    printReceipt() {
      printJS({
        printable: 'receipt',
        type: 'html',
        style: '.receipt-style { font-family: SimSun; }'
      })
    },
    printCanvas() {
      const canvas = document.getElementById('salesChart')
      printJS({
        printable: canvas.toDataURL('image/png'),
        type: 'image',
        header: '销售图表'
      })
    }
  }
}
</script>

<style>
@media print {
  .no-print {
    display: none;
  }
  
  .receipt-style {
    font-size: 12pt;
  }
  
  table {
    page-break-inside: avoid;
  }
}
</style>

七、各方案对比与选择指南

方案	复杂度	功能	适用场景	浏览器兼容性
window.print()	低	基础	简单打印需求	全兼容
CSS媒体查询	中	样式控制	需要定制打印样式	IE9+
vue-print-nb	中	丰富	Vue项目专用	现代浏览器
Print.js	中高	非常丰富	复杂打印需求	IE10+
服务端打印	高	完全控制	需要精确控制打印	不依赖前端

选择建议： 1. 简单需求：window.print() + CSS媒体查询 2. Vue项目：vue-print-nb 3. 复杂需求：Print.js 4. 企业级应用：考虑服务端打印方案

结语

本文详细介绍了Vue项目中实现打印功能的各种方案，从最简单的原生API到专业的打印库，覆盖了大多数Web应用场景。在实际项目中，建议根据具体需求选择最合适的方案，同时注意打印性能优化和用户体验。

随着Web技术的不断发展，打印功能也在持续进化。未来Web打印可能会在以下方向有更多突破： - 更完善的打印API标准 - 更好的跨浏览器一致性 - 更强大的打印预览功能 - 与PWA技术的深度集成

希望本文能帮助您在Vue项目中实现高效、专业的打印功能，提升用户体验和业务效率。 “`

这篇文章共计约4500字，全面涵盖了Vue项目中实现打印功能的各种方案，包含： 1. 基础方案和高级方案 2. 详细代码示例 3. 方案对比和选择建议 4. 最佳实践和常见问题 5. 完整示例项目

文章采用Markdown格式，结构清晰，包含代码块、表格等元素，可以直接用于技术博客或文档。需要调整内容或补充细节可以随时告知。