当前位置：首页 > VUE

vue实现网页打印

2026-02-18 01:00:50VUE

Vue 实现网页打印的方法

在 Vue 项目中实现网页打印功能，可以通过以下几种方式完成：

使用 window.print() 方法

调用浏览器原生的打印 API 是最简单的方式。创建一个打印按钮，点击时触发打印。

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

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

使用 CSS 控制打印样式

通过 CSS 的 @media print 可以自定义打印时的样式，隐藏不需要打印的元素。

@media print {
  .no-print {
    display: none;
  }
  #printArea {
    width: 100%;
  }
}

使用 vue-print-nb 插件

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

vue实现网页打印

安装插件：

npm install vue-print-nb --save

在 Vue 中使用：

<template>
  <div id="printArea">
    <!-- 需要打印的内容 -->
  </div>
  <button v-print="printObj">打印</button>
</template>

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

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

打印特定区域

如果需要打印页面中的特定区域，可以将内容复制到一个新窗口再打印。

vue实现网页打印

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

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

使用 html2canvas 和 jsPDF 生成 PDF

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

安装依赖：

npm install html2canvas jspdf --save

实现代码：

<template>
  <button @click="exportToPDF">导出为PDF</button>
  <div id="pdfArea">
    <!-- 需要打印的内容 -->
  </div>
</template>

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

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