当前位置：首页 > VUE

vue实现打印的方法

2026-02-23 05:14:54VUE

使用 window.print() 方法

在 Vue 中可以直接调用原生 window.print() 方法触发浏览器打印功能。这种方式简单但无法定制打印内容样式。

<template>
  <button @click="handlePrint">打印页面</button>
</template>

<script>
export default {
  methods: {
    handlePrint() {
      window.print();
    }
  }
}
</script>

使用 vue-print-nb 插件

安装 vue-print-nb 插件可以更方便地实现打印功能，支持指定打印区域和自定义样式。

安装插件：

npm install vue-print-nb --save

在 Vue 项目中使用：

vue实现打印的方法

import Print from 'vue-print-nb'
Vue.use(Print);

模板中使用：

<template>
  <div id="printArea">
    <!-- 需要打印的内容 -->
    <h1>打印内容标题</h1>
    <p>打印内容正文</p>
  </div>
  <button v-print="printObj">打印</button>
</template>

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'printArea',
        popTitle: '打印标题', // 打印标题
        extraCss: 'https://example.com/print.css' // 自定义打印样式
      }
    }
  }
}
</script>

使用 CSS 媒体查询控制打印样式

通过 CSS 的 @media print 可以专门为打印设置样式，隐藏不需要打印的元素。

<style>
@media print {
  .no-print {
    display: none;
  }
  body {
    font-size: 12pt;
  }
}
</style>

创建打印专用组件

对于复杂的打印需求，可以创建一个专门的打印组件，动态生成打印内容。

vue实现打印的方法

<template>
  <div>
    <button @click="printContent">打印</button>
    <div ref="printContent" class="print-content">
      <!-- 动态内容 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    printContent() {
      const printWindow = window.open('', '_blank');
      printWindow.document.write(`
        <html>
          <head>
            <title>打印内容</title>
            <style>
              body { font-family: Arial; }
              /* 其他打印样式 */
            </style>
          </head>
          <body>
            ${this.$refs.printContent.innerHTML}
          </body>
        </html>
      `);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    }
  }
}
</script>

使用 html2canvas 和 jsPDF 生成 PDF 打印

对于需要将 HTML 转换为 PDF 打印的情况，可以使用 html2canvas 和 jsPDF 库。

安装依赖：

npm install html2canvas jspdf

使用示例：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    async printPDF() {
      const element = document.getElementById('printArea');
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF();
      pdf.addImage(imgData, 'PNG', 0, 0);
      pdf.save('document.pdf');
      // 或者直接打印
      // const blob = pdf.output('blob');
      // window.open(URL.createObjectURL(blob));
    }
  }
}

以上方法提供了从简单到复杂的多种 Vue 打印实现方案，可以根据项目需求选择合适的方式。