当前位置：首页 > VUE

vue页面实现打印功能

2026-01-22 04:38:11VUE

使用window.print()实现基础打印

在Vue组件中直接调用浏览器原生打印API是最简单的方式。通过window.print()会触发浏览器打印对话框，打印当前页面全部内容。

<template>
  <div>
    <button @click="handlePrint">打印页面</button>
    <div class="print-content">需要打印的内容区域</div>
  </div>
</template>

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

<style>
@media print {
  /* 隐藏不需要打印的元素 */
  button {
    display: none;
  }

  /* 调整打印样式 */
  .print-content {
    font-size: 12pt;
  }
}
</style>

使用vue-print-nb插件

安装专门的Vue打印插件可以更灵活地控制打印内容：

npm install vue-print-nb --save

在项目中使用：

vue页面实现打印功能

import Print from 'vue-print-nb'

Vue.use(Print)

模板中使用v-print指令：

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

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'printArea',
        popTitle: '打印标题', // 打印标题
        extraCss: 'https://example.com/print.css', // 附加CSS
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>' // 附加HEAD
      }
    }
  }
}
</script>

打印样式优化

通过CSS媒体查询专门设置打印样式：

vue页面实现打印功能

@media print {
  body * {
    visibility: hidden;
  }

  #printSection, #printSection * {
    visibility: visible;
  }

  #printSection {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  /* 移除背景色和图片 */
  * {
    background-color: transparent !important;
    color: #000 !important;
    background-image: none !important;
  }

  /* 调整边距 */
  @page {
    size: A4;
    margin: 0;
  }
}

打印分页控制

使用CSS控制打印分页：

.page-break {
  page-break-after: always;
}

.avoid-break {
  page-break-inside: avoid;
}

生成PDF打印

使用html2pdf.js等库生成PDF：

import html2pdf from 'html2pdf.js'

export default {
  methods: {
    generatePDF() {
      const element = document.getElementById('pdf-content')
      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()
    }
  }
}