当前位置：首页 > VUE

vue实现打印方法

2026-02-25 00:28:02VUE

Vue 实现打印功能的方法

在 Vue 项目中实现打印功能可以通过多种方式完成，以下是几种常见的方法：

使用 window.print() 方法

调用浏览器原生的打印功能，适用于打印整个页面或指定区域。

methods: {
  printPage() {
    window.print();
  }
}

打印指定区域内容

通过获取 DOM 元素并提取其 HTML 内容，创建一个新窗口进行打印。

methods: {
  printSpecificArea() {
    const printContent = document.getElementById('print-area').innerHTML;
    const originalContent = document.body.innerHTML;
    document.body.innerHTML = printContent;
    window.print();
    document.body.innerHTML = originalContent;
  }
}

使用 vue-print-nb 插件

安装并配置第三方插件 vue-print-nb，提供更便捷的打印功能。

npm install vue-print-nb --save

在 main.js 中引入插件：

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

在组件中使用 v-print 指令：

<button v-print="printObj">打印</button>
<div id="print-area">需要打印的内容</div>

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

使用 html2canvas 和 jsPDF 生成 PDF 打印

适用于需要将页面内容转换为 PDF 再打印的场景。

npm install html2canvas jspdf --save

实现代码：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

methods: {
  async printPDF() {
    const element = document.getElementById('print-area');
    const canvas = await html2canvas(element);
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save('document.pdf');
  }
}

注意事项

打印样式需要在 CSS 中通过 @media print 进行定义，确保打印效果符合预期。

@media print {
  body * {
    visibility: hidden;
  }
  #print-area, #print-area * {
    visibility: visible;
  }
  #print-area {
    position: absolute;
    left: 0;
    top: 0;
  }
}

处理动态内容时，确保在打印前数据已加载完成，避免打印空白内容。对于复杂表格或图表，建议使用上述 PDF 生成方案。

vue实现打印方法