当前位置：首页 > 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 设计的打印插件，使用简单且功能强大。

安装插件：

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 组合。

vue实现模板打印

安装依赖：

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 可以专门设置打印时的样式，隐藏不需要打印的元素，调整打印布局。

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

注意事项

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

标签: 模板 vue

分享给朋友：

vue实现功能

Vue 功能实现方法 Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是实现常见功能的几种方法：数据绑定与响应式更新在 Vue 中，数据绑定通过 v-model…

实现vue datepicker

安装依赖使用 vue-datepicker 或第三方库如 v-calendar 或 vue2-datepicker。以 vue2-datepicker 为例： npm install vue2…

vue动画实现

Vue动画实现方法 Vue提供了多种方式实现动画效果，主要通过内置组件和第三方库完成。使用<transition>组件 Vue内置的<transition>组件可以为元素添…

vue实现login

Vue 实现登录功能在 Vue 中实现登录功能通常需要以下几个步骤：创建登录表单组件在 Vue 项目中创建一个登录表单组件，包含用户名和密码输入框以及提交按钮。可以使用 Vue 的模板语法和双…

vue scrolltop 实现

实现 Vue 中的 scrollTop 在 Vue 中实现滚动到顶部功能可以通过多种方式完成，包括使用原生 JavaScript、Vue 指令或第三方库。以下是几种常见的实现方法：使用原生 Jav…

vue实现加减

Vue 实现加减功能在 Vue 中实现加减功能可以通过数据绑定和事件监听来完成。以下是一个简单的实现方法：模板部分 <template> <div> <…

vue实现模板打印