当前位置：首页 > VUE

vue实现标签打印

2026-03-09 20:08:13VUE

Vue 实现标签打印的方法

使用浏览器原生打印功能

通过调用浏览器的 window.print() 方法实现打印功能。这种方法简单快捷，适合打印静态内容。

<template>
  <div>
    <div ref="printContent" class="print-area">
      <!-- 需要打印的内容 -->
      <h3>标签内容</h3>
      <p>示例标签文本</p>
    </div>
    <button @click="handlePrint">打印标签</button>
  </div>
</template>

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

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

使用第三方库 vue-print-nb

vue-print-nb 是一个专门为 Vue 设计的打印插件，支持自定义打印内容和样式。

安装依赖：

npm install vue-print-nb --save

在 Vue 项目中使用：

<template>
  <div>
    <div id="printContent" class="print-area">
      <!-- 需要打印的内容 -->
      <h3>标签内容</h3>
      <p>示例标签文本</p>
    </div>
    <button v-print="printConfig">打印标签</button>
  </div>
</template>

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

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

使用 html2canvas 和 jsPDF 生成 PDF 打印

如果需要将标签内容转换为 PDF 再打印，可以使用 html2canvas 和 jsPDF 组合。

安装依赖：

npm install html2canvas jspdf --save

实现代码：

vue实现标签打印

<template>
  <div>
    <div ref="printContent" class="print-area">
      <!-- 需要打印的内容 -->
      <h3>标签内容</h3>
      <p>示例标签文本</p>
    </div>
    <button @click="generatePDF">生成PDF并打印</button>
  </div>
</template>

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

export default {
  methods: {
    async generatePDF() {
      const element = this.$refs.printContent;
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF('p', 'mm', 'a4');
      const imgWidth = 190; // PDF 页面宽度
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
      pdf.save('label.pdf');
      // 直接打印
      pdf.autoPrint();
      window.open(pdf.output('bloburl'), '_blank');
    }
  }
};
</script>