vue实现pdf打印

实现PDF打印的基本方法

在Vue中实现PDF打印可以通过多种方式完成，常见的有使用浏览器原生打印功能、第三方库或服务端生成PDF。以下是几种常用方法：

浏览器原生打印 使用window.print()触发浏览器的打印功能，配合CSS的@media print规则调整打印样式。这种方式简单但无法直接生成PDF文件，依赖用户选择打印为PDF。

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

html2pdf.js库 html2pdf.js是一个将HTML转换为PDF的库，支持自定义选项如页边距、分辨率等。安装后可通过以下代码使用：

import html2pdf from 'html2pdf.js';

methods: {
  generatePDF() {
    const element = document.getElementById('content-to-print');
    const opt = {
      margin: 10,
      filename: 'document.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
    };
    html2pdf().from(element).set(opt).save();
  }
}

使用jsPDF库

jsPDF是一个纯客户端生成PDF的库，适合需要动态生成复杂内容的场景。以下是一个基础示例：

import jsPDF from 'jspdf';

methods: {
  createPDF() {
    const doc = new jsPDF();
    doc.text('Hello PDF!', 10, 10);
    doc.save('test.pdf');
  }
}

服务端生成PDF

如果需要更复杂的PDF布局或大量数据处理，可以通过后端生成PDF。前端发送数据到后端，后端使用如pdfkit（Node.js）或wkhtmltopdf等工具生成PDF并返回下载链接。

axios.post('/generate-pdf', { data: this.formData })
  .then(response => {
    window.open(response.data.downloadUrl);
  });

打印样式优化

无论采用哪种方式，通过CSS的@media print优化打印效果是必要的。隐藏不必要的元素、调整边距和分页：

@media print {
  .no-print {
    display: none;
  }
  body {
    margin: 0;
  }
  .page-break {
    page-break-after: always;
  }
}

注意事项

• 动态内容需确保在生成PDF前已完全渲染，可使用this.$nextTick或异步等待。
• 第三方库可能增加打包体积，按需引入或使用CDN。
• 跨浏览器测试打印效果，不同浏览器对CSS打印支持存在差异。