当前位置：首页 > VUE

vue项目实现打印

2026-02-18 00:06:05VUE

实现 Vue 项目打印功能的方法

使用 window.print() 基础打印

在 Vue 组件中直接调用浏览器原生打印 API，适合简单内容打印。

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

需配合 CSS 打印样式优化：

@media print {
  .no-print {
    display: none;
  }
  body {
    visibility: hidden;
  }
  .print-area {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

使用 vue-print-nb 插件

专为 Vue 设计的打印插件，支持局部打印和自定义配置。安装：

npm install vue-print-nb --save

使用示例：

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

<template>
  <div id="printContent">
    <!-- 要打印的内容 -->
  </div>
  <button v-print="printConfig">打印</button>
</template>

<script>
export default {
  data() {
    return {
      printConfig: {
        id: 'printContent',
        popTitle: '打印标题',
        extraCss: 'https://example.com/print.css'
      }
    }
  }
}
</script>

使用 html2canvas + jsPDF 实现复杂打印

适用于需要将 DOM 转换为 PDF 的场景。安装依赖：

npm install html2canvas jspdf

实现代码：

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

methods: {
  async exportToPDF() {
    const element = document.getElementById('printArea');
    const canvas = await html2canvas(element);
    const imgData = canvas.toDataURL('image/png');

    const pdf = new jsPDF({
      orientation: 'portrait',
      unit: 'mm'
    });

    const imgProps = pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    pdf.save('document.pdf');
  }
}

打印优化技巧

添加打印按钮时考虑用户体验：

<button @click="handlePrint" class="print-button">
  <i class="printer-icon"></i> 打印文档
</button>

处理分页问题：

@media print {
  .page-break {
    page-break-after: always;
  }
}

动态加载打印内容：

async loadPrintData() {
  const res = await axios.get('/api/print-data');
  this.printContent = res.data;
  this.$nextTick(() => {
    window.print();
  });
}