当前位置：首页 > VUE

vue实现预览打印

2026-01-17 04:46:15VUE

Vue 实现预览打印的方法

在 Vue 项目中实现预览打印功能可以通过多种方式完成，以下是几种常见的方法：

使用 window.print() 方法

通过调用浏览器的原生打印功能实现简单的打印预览。创建一个专门的打印组件或页面，仅包含需要打印的内容，隐藏不需要打印的元素。

<template>
  <div>
    <div id="print-content">
      <!-- 需要打印的内容 -->
      <h1>打印标题</h1>
      <p>打印内容示例</p>
    </div>
    <button @click="print">打印</button>
  </div>
</template>

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

<style>
@media print {
  body * {
    visibility: hidden;
  }
  #print-content, #print-content * {
    visibility: visible;
  }
  #print-content {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>

使用 vue-print-nb 插件

vue-print-nb 是一个专门为 Vue 设计的打印插件，使用简单且功能丰富。

安装插件：

vue实现预览打印

npm install vue-print-nb --save

在 Vue 项目中使用：

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

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'print-content',
        popTitle: '打印标题'
      }
    }
  }
};
</script>

使用 html2canvas 和 jsPDF 实现 PDF 导出

如果需要将内容导出为 PDF 再打印，可以结合 html2canvas 和 jsPDF 使用。

vue实现预览打印

安装依赖：

npm install html2canvas jspdf --save

示例代码：

<template>
  <div>
    <div id="pdf-content">
      <!-- 需要打印的内容 -->
      <h1>PDF 标题</h1>
      <p>PDF 内容示例</p>
    </div>
    <button @click="exportToPDF">导出 PDF</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    exportToPDF() {
      const element = document.getElementById('pdf-content');
      html2canvas(element).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 0, 0);
        pdf.save('document.pdf');
      });
    }
  }
};
</script>

使用 CSS 控制打印样式

通过 CSS 的 @media print 规则可以优化打印效果，隐藏不需要的元素或调整布局。

@media print {
  .no-print {
    display: none;
  }
  .print-only {
    display: block;
  }
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
}

以上方法可以根据具体需求选择使用，简单打印可以直接用 window.print()，复杂需求可以结合插件或 PDF 导出实现。

标签: vue