当前位置：首页 > VUE

vue实现页面打印

2026-03-08 22:04:06VUE

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 class="print-content">这部分内容打印</div>
    <button @click="printSpecificArea">打印指定区域</button>
  </div>
</template>

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

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

使用 vue-print-nb 插件

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

安装插件：

npm install vue-print-nb --save

在 Vue 项目中使用：

<template>
  <div id="printContent">
    这是需要打印的内容
  </div>
  <button v-print="printConfig">打印</button>
</template>

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

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

自定义打印样式

通过 CSS 的 @media print 可以自定义打印样式，例如隐藏导航栏、调整字体大小等。

<style>
@media print {
  header, footer, .sidebar {
    display: none;
  }
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
}
</style>

打印 PDF

如果需要生成 PDF 再打印，可以使用 html2pdf 或 jspdf 库。

安装 html2pdf：

npm install html2pdf.js --save

使用示例：

vue实现页面打印

<template>
  <div id="pdfContent">
    这是要转换为 PDF 的内容
  </div>
  <button @click="generatePDF">生成 PDF 并打印</button>
</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>