当前位置：首页 > VUE

vue实现打印预览

2026-02-18 22:36:55VUE

Vue 实现打印预览的方法

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

使用 window.print() 方法

创建一个打印按钮，点击时调用 window.print() 方法触发浏览器的打印功能。

<template>
  <div>
    <div id="printContent">
      <!-- 需要打印的内容 -->
      <h1>打印预览内容</h1>
      <p>这是需要打印的文本</p>
    </div>
    <button @click="print">打印</button>
  </div>
</template>

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

<style>
@media print {
  /* 隐藏不需要打印的元素 */
  button {
    display: none;
  }
  /* 设置打印样式 */
  #printContent {
    width: 100%;
  }
}
</style>

使用 vue-print-nb 插件

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

安装插件：

npm install vue-print-nb --save

在项目中使用：

<template>
  <div>
    <div id="printContent">
      <h1>打印预览内容</h1>
      <p>这是需要打印的文本</p>
    </div>
    <button v-print="printObj">打印</button>
  </div>
</template>

<script>
import print from 'vue-print-nb';

export default {
  directives: {
    print
  },
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '打印标题', // 打印标题
        extraCss: 'https://example.com/print.css', // 额外CSS
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>' // 额外头部标签
      }
    };
  }
};
</script>

使用 html2canvas 和 jsPDF 生成 PDF 打印

如果需要将页面内容转为 PDF 再打印，可以使用 html2canvas 和 jsPDF 库。

安装依赖：

npm install html2canvas jspdf --save

实现代码：

<template>
  <div>
    <div id="pdfContent">
      <h1>PDF 打印内容</h1>
      <p>这是需要转为 PDF 的文本</p>
    </div>
    <button @click="generatePDF">生成PDF并打印</button>
  </div>
</template>

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

export default {
  methods: {
    generatePDF() {
      const element = document.getElementById('pdfContent');
      html2canvas(element).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 0, 0);
        pdf.autoPrint(); // 自动打开打印对话框
        window.open(pdf.output('bloburl')); // 在新窗口打开PDF
      });
    }
  }
};
</script>

自定义打印样式

通过 CSS 的 @media print 规则可以自定义打印时的样式。

@media print {
  body * {
    visibility: hidden;
  }
  #printContent, #printContent * {
    visibility: visible;
  }
  #printContent {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}