Vue2 项目中使用 html2canvas + jsPDF 导出 A4 PDF 实战指南

在 Vue2 项目中实现「页面导出 PDF（A4尺寸）」是一个非常常见的需求，比如：

报表导出
合同生成
发票打印
审批单据

但实际开发中你很容易遇到这些问题：

引入 jspdf 报错（Module parse failed）
页面比例不对
导出 PDF 被拉伸
多页分页错乱
打印尺寸不准确

这篇文章会从 依赖安装 → 导入方式 → A4尺寸 → 实战代码 一步一步带你彻底解决。

一、依赖安装（Vue2重点）

Vue2 老项目（尤其 webpack3）对 jspdf 2.x 支持不好，推荐直接使用稳定版本：

复制代码

npm install html2canvas
npm install jspdf@1.5.3

二、正确引入方式（避免报错）

复制代码

import html2canvas from "html2canvas"
import jsPDF from "jspdf"

⚠️ 注意：

不要写：

复制代码

import { jsPDF } from "jspdf" ❌（Vue2老项目容易报错）

三、为什么会报错？

常见报错：

复制代码

Module parse failed: Unexpected token

原因：

jspdf 2.x 使用 ES Module

你的 Vue2（webpack3）不支持解析

node_modules 默认不编译

解决方案：

使用 jspdf@1.5.3（推荐）
或使用 require
或配置 babel 编译（复杂）

四、A4 页面尺寸（核心知识）

A4 标准尺寸：

宽：210mm
高：297mm

浏览器换算：

复制代码

1mm ≈ 3.78px

所以：

单位	宽	高
mm	210	297
px	794	1123

五、页面样式（推荐用 mm）

标准 A4 页面写法

复制代码

.a4-page {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  margin: 0 auto;
  padding: 20mm;
  box-sizing: border-box;
}

优点：

完全匹配打印尺寸
PDF 不变形
不需要换算

如果用 px（不推荐）

复制代码

.a4-page {
  width: 794px;
  min-height: 1123px;
}

问题：

不同设备会缩放
打印可能失真

六、导出 PDF 核心代码

复制代码

methods: {
  async exportPDF() {
    const dom = document.getElementById("pdfDom")

    const canvas = await html2canvas(dom, {
      scale: 2,
      useCORS: true
    })

    const imgData = canvas.toDataURL("image/png")

    const pdf = new jsPDF("p", "mm", "a4")

    const pageWidth = 210
    const pageHeight = 297

    const imgWidth = pageWidth
    const imgHeight = (canvas.height * imgWidth) / canvas.width

    let heightLeft = imgHeight
    let position = 0

    pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight)
    heightLeft -= pageHeight

    // 多页处理
    while (heightLeft > 0) {
      position = heightLeft - imgHeight
      pdf.addPage()
      pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight)
      heightLeft -= pageHeight
    }

    pdf.save("导出文件.pdf")
  }
}

七、总结

核心逻辑只有一句话：

始终按照 A4 宽度 210mm 等比例缩放

复制代码

const imgHeight = (canvas.height * 210) / canvas.width

这样可以保证：

不变形
不拉伸
比例正确