当前位置：首页 > VUE

vue实现网页打印

2026-01-17 08:28:53VUE

Vue 实现网页打印的方法

在 Vue 项目中实现网页打印功能可以通过以下几种方式完成，具体选择取决于需求和场景。

使用 window.print() 方法

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

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

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

打印指定区域

如果只需要打印页面中的某一部分内容，可以通过 CSS 控制打印范围。

<template>
  <div>
    <div class="no-print">这部分内容不会被打印</div>
    <div id="printArea">这部分是需要打印的内容</div>
    <button @click="printSpecificArea">打印指定区域</button>
  </div>
</template>

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

<style>
@media print {
  .no-print {
    display: none;
  }
}
</style>

使用 vue-print-nb 插件

vue-print-nb 是一个专门为 Vue 设计的打印插件，使用起来更加方便。

安装插件：

npm install vue-print-nb --save

在 Vue 项目中使用：

<template>
  <div>
    <div id="printContent">需要打印的内容</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: '打印标题'
      }
    }
  }
}
</script>

使用 CSS 控制打印样式

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

<style>
@media print {
  .header, .footer, .sidebar {
    display: none;
  }
  .content {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}
</style>

打印 PDF 文件

如果需要生成 PDF 文件，可以使用 html2pdf.js 或 jspdf 库。

安装 html2pdf.js：

npm install html2pdf.js

在 Vue 项目中使用：

vue实现网页打印

<template>
  <div>
    <div id="pdfContent">需要转换为 PDF 的内容</div>
    <button @click="generatePDF">生成 PDF</button>
  </div>
</template>

<script>
import html2pdf from 'html2pdf.js'

export default {
  methods: {
    generatePDF() {
      const element = document.getElementById('pdfContent');
      const opt = {
        margin: 1,
        filename: 'document.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };
      html2pdf().from(element).set(opt).save();
    }
  }
}
</script>