Vuetify 2：如何打印v-sheet/v-card及子组件至A4并生成PDF文档？

一、将v-card/v-sheet打印为A4纸的可行方法 #

方法1：浏览器原生打印+自定义媒体查询 #

这是最轻量化的方案，无需额外依赖，利用浏览器自带的打印/导出PDF功能实现：

• 给目标v-card/v-sheet添加专属类名，比如print-target
• 编写打印专属CSS，确保仅目标组件按A4尺寸输出：

  @media print {
    /* 隐藏页面其他所有元素 */
    body * {
      visibility: hidden;
    }
    /* 仅显示目标组件及其子元素 */
    .print-target, .print-target * {
      visibility: visible;
    }
    /* 强制A4尺寸布局 */
    .print-target {
      position: absolute;
      left: 0;
      top: 0;
      width: 210mm;
      height: 297mm;
      margin: 0;
      box-shadow: none;
      border: none;
    }
    /* 修复表单元素打印样式异常 */
    .print-target input, .print-target textarea, .print-target select {
      border: 1px solid #333;
      background: #fff !important;
      color: #000 !important;
    }
  }
  

• 添加触发按钮，调用原生打印：

  <v-btn @click="window.print()">导出为PDF</v-btn>
  

用户在打印预览中选择“保存为PDF”即可得到A4尺寸的文档。

方法2：html2canvas + jsPDF 截图式导出 #

适合需要精准控制多页内容、或页面存在复杂交互元素的场景，通过将组件转为图片再生成PDF：

1. 安装依赖：

   npm install html2canvas jspdf
   

2. 编写导出函数：

   import html2canvas from 'html2canvas';
   import jsPDF from 'jspdf';
   
   export const exportCardToPDF = async () => {
     const targetCard = document.querySelector('.print-target');
     // 将组件转为canvas，提高分辨率避免模糊
     const canvas = await html2canvas(targetCard, {
       scale: 2,
       useCORS: true,
       logging: false
     });
     const imgData = canvas.toDataURL('image/png');
     // 初始化A4尺寸PDF
     const pdf = new jsPDF('p', 'mm', 'a4');
     const imgWidth = 210;
     const pageHeight = 297;
     const imgHeight = (canvas.height * imgWidth) / canvas.width;
     let remainingHeight = imgHeight;
     let position = 0;
   
     // 添加第一页
     pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
     remainingHeight -= pageHeight;
   
     // 自动分页处理长内容
     while (remainingHeight >= 0) {
       position = remainingHeight - imgHeight;
       pdf.addPage();
       pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
       remainingHeight -= pageHeight;
     }
     pdf.save('form-document.pdf');
   };
   

3. 在组件中调用该函数即可完成导出。

二、Vuetify 2 制作文档的可行方案与建议 #

方案1：基于Vuetify布局组件构建结构化文档 #

• 用v-container、v-row、v-col搭建A4尺寸的页面框架，配合v-card、v-sheet划分文档区块，确保屏幕显示与打印输出的布局一致性。
• 利用Vuetify内置的响应式类控制元素显示：比如用d-print-none隐藏导航栏、操作按钮等非文档内容，d-screen-none隐藏仅打印需要的页眉页脚。

方案2：结合pdfmake生成结构化PDF #

如果需要生成数据驱动的规范文档（如带表格、自动分页、自定义页眉页脚的表单），推荐使用pdfmake：

• 提取Vuetify表单中的用户输入数据，存入数据对象；
• 按照pdfmake的语法定义文档结构（包含文本、表格、样式等），直接生成矢量PDF，相比截图式导出更清晰，也更易维护。

实用建议 #

1. 实时测试打印样式：开发时用浏览器打印预览（Ctrl+P）调试，重点检查字体、间距、边框的打印效果，避免屏幕显示与PDF输出不一致。
2. 等待动态内容渲染：若表单包含异步加载的内容，调用导出函数前需等待内容渲染完成（可结合this.$nextTick()）。
3. 优化分辨率：使用html2canvas时提高scale参数；使用pdfmake时嵌入支持的字体，避免文字模糊。
4. 清除冗余样式：打印时通过媒体查询覆盖Vuetify默认的阴影、过渡、动画效果，减少PDF体积与渲染异常。

内容的提问来源于stack exchange，提问作者Natthapol Maneechote