当前位置：首页 > VUE

vue实现打印模板

2026-01-23 08:18:28VUE

Vue 实现打印模板的方法

在 Vue 中实现打印功能通常需要结合浏览器的打印 API 和 CSS 样式控制。以下是几种常见的方法：

使用 window.print() 方法

创建一个专门用于打印的组件或模板，隐藏非打印内容，调用 window.print() 触发浏览器打印对话框。

<template>
  <div>
    <button @click="print">打印</button>
    <div id="printArea" v-show="false">
      <!-- 打印内容 -->
      <h1>打印标题</h1>
      <p>打印内容...</p>
    </div>
  </div>
</template>

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

      document.body.innerHTML = printContent
      window.print()
      document.body.innerHTML = originalContent
    }
  }
}
</script>

使用 CSS 媒体查询

通过 CSS 的 @media print 规则控制打印时的样式，隐藏不需要打印的元素。

@media print {
  .no-print {
    display: none;
  }

  .print-only {
    display: block;
  }
}

使用 vue-print-nb 插件

安装并使用专门为 Vue 设计的打印插件 vue-print-nb：

npm install vue-print-nb --save

在 Vue 项目中使用：

import Print from 'vue-print-nb'
Vue.use(Print)

<template>
  <div>
    <button v-print="'#printArea'">打印</button>
    <div id="printArea">
      <!-- 打印内容 -->
    </div>
  </div>
</template>

使用 iframe 打印

创建一个隐藏的 iframe 来加载打印内容，避免影响主页面。

printWithIframe() {
  const printContent = document.getElementById('printArea').innerHTML
  const frame = document.createElement('iframe')
  frame.style.display = 'none'
  document.body.appendChild(frame)

  const frameDoc = frame.contentWindow || frame.contentDocument
  if (frameDoc.document) {
    frameDoc = frameDoc.document
  }

  frameDoc.document.open()
  frameDoc.document.write(printContent)
  frameDoc.document.close()

  setTimeout(() => {
    frame.contentWindow.print()
    document.body.removeChild(frame)
  }, 100)
}

打印样式优化

为打印内容添加专门的样式，确保打印效果符合预期：

.print-style {
  width: 210mm; /* A4 宽度 */
  height: 297mm; /* A4 高度 */
  margin: 0;
  padding: 10mm;
  box-sizing: border-box;
  font-size: 12pt;
  line-height: 1.5;
}