当前位置：首页 > VUE

vue实现模板打印

2026-03-29 03:24:50VUE

Vue 实现模板打印的方法

使用 window.print() 方法

在 Vue 中可以通过调用浏览器原生的 window.print() 方法实现打印功能。创建一个隐藏的打印区域，将需要打印的内容放入其中，调用打印方法时只显示该区域。

<template>
  <div>
    <button @click="handlePrint">打印</button>
    <div class="print-area" ref="printContent">
      <!-- 打印内容 -->
      <h1>打印标题</h1>
      <p>打印内容...</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handlePrint() {
      const printContent = this.$refs.printContent.innerHTML;
      const originalContent = document.body.innerHTML;
      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;
    }
  }
}
</script>

<style>
@media print {
  body * {
    visibility: hidden;
  }
  .print-area, .print-area * {
    visibility: visible;
  }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>

使用 vue-print-nb 插件

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

安装插件：

npm install vue-print-nb --save

使用示例：

<template>
  <div>
    <button v-print="printObj">打印</button>
    <div id="printContent">
      <!-- 打印内容 -->
      <h1>打印标题</h1>
      <p>打印内容...</p>
    </div>
  </div>
</template>

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

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

使用 html2canvas 和 jsPDF 生成 PDF

如果需要将内容生成 PDF 再打印，可以使用 html2canvas 和 jsPDF 组合。

安装依赖：

npm install html2canvas jspdf --save

实现代码：

<template>
  <div>
    <button @click="generatePDF">生成PDF并打印</button>
    <div id="pdfContent">
      <!-- PDF内容 -->
      <h1>PDF标题</h1>
      <p>PDF内容...</p>
    </div>
  </div>
</template>

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

export default {
  methods: {
    async generatePDF() {
      const element = document.getElementById('pdfContent')
      const canvas = await html2canvas(element)
      const imgData = canvas.toDataURL('image/png')
      const pdf = new jsPDF()
      pdf.addImage(imgData, 'PNG', 0, 0)
      pdf.autoPrint()
      pdf.output('dataurlnewwindow')
    }
  }
}
</script>

使用 CSS 控制打印样式

通过 CSS 的 @media print 可以专门设置打印时的样式，隐藏不需要打印的元素，调整打印布局。

vue实现模板打印

@media print {
  .no-print {
    display: none;
  }
  .print-only {
    display: block;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
}

注意事项

打印时可能会遇到样式丢失问题，建议在打印区域使用内联样式或简单样式
复杂布局可能需要调整打印方向（横向/纵向）
打印前最好预览效果，不同浏览器对打印的支持可能有差异
大量数据打印时考虑分页处理

标签: 模板 vue

分享给朋友：

vue实现popup

Vue 实现 Popup 弹窗使用 Vue 原生组件创建一个基本的 Vue 组件作为弹窗，通过 v-if 或 v-show 控制显示隐藏。 <template> <div&…

vue实现groupbox

Vue 实现 GroupBox 组件在 Vue 中实现类似 GroupBox 的效果可以通过自定义组件完成。GroupBox 通常是一个带有标题的边框容器，用于将相关控件分组显示。基本实现方法…

vue滑块实现

Vue滑块实现方法使用原生HTML5 range input Vue中可以绑定原生HTML5的range类型input元素实现基础滑块功能： <template> <div&…

vue 轮询实现

轮询的基本概念轮询是一种通过定时向服务器发送请求来获取最新数据的技术。适用于需要实时更新但无法使用WebSocket的场景。使用setInterval实现轮询在Vue组件中，可以通过setIn…

vue实现门户

Vue 实现门户网站的关键步骤搭建基础框架使用 Vue CLI 或 Vite 初始化项目，安装 Vue Router 管理多页面路由。门户通常需要响应式布局，可引入 UI 库如 Element P…

vue实现指引

Vue 实现指引功能 Vue 中实现指引功能可以通过多种方式完成，常见的有使用第三方库或自定义实现。以下是几种常见方法：使用第三方库（如 driver.js）安装 driver.js： np…

vue实现模板打印