如何在客户端将网页HTML转为PDF？html2pdf.js 完全实战指南

var element = document.getElementById("element-to-print");
html2pdf(element);

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
  integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

<script src="html2pdf.bundle.min.js"></script>

npm install --save html2pdf.js

bower install --save html2pdf.js

function addScript(url) {
  var script = document.createElement("script");
  script.type = "application/javascript";
  script.src = url;
  document.head.appendChild(script);
}
addScript(
  "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js",
);

// 注入后即可使用
html2pdf(document.body);

<script src="jspdf.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="html2pdf.min.js"></script>

function exportInvoice() {
  const element = document.getElementById("invoice");

  const opt = {
    margin: [10, 10, 10, 10], // 上下左右边距 10mm
    filename: `invoice-${Date.now()}.pdf`,
    image: { type: "jpeg", quality: 0.98 },
    html2canvas: {
      scale: 2, // 高清输出
      useCORS: true, // 允许跨域图片
      scrollX: 0,
      scrollY: 0,
    },
    jsPDF: {
      unit: "mm",
      format: "a4",
      orientation: "portrait",
    },
    pagebreak: {
      mode: ["css", "legacy"], // 尊重 CSS 分页规则
      avoid: ".no-break", // 避免在这些元素内分页
    },
  };

  html2pdf().set(opt).from(element).save();
}

function exportResume() {
  const element = document.querySelector(".resume-container");

  const opt = {
    margin: 0,
    filename: "my-resume.pdf",
    image: { type: "jpeg", quality: 0.95 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
  };

  // 使用 Worker API 在生成后添加水印
  html2pdf()
    .set(opt)
    .from(element)
    .toPdf()
    .get("pdf")
    .then(function (pdf) {
      // 在每页添加页眉/页脚
      const totalPages = pdf.internal.getNumberOfPages();
      for (let i = 1; i <= totalPages; i++) {
        pdf.setPage(i);
        pdf.setFontSize(10);
        pdf.text("Confidential - Page " + i + " of " + totalPages, 10, 287);
      }
    })
    .save();
}

function exportLongDocument() {
  const element = document.getElementById("long-content");

  const opt = {
    margin: [15, 15, 15, 15],
    filename: "document.pdf",
    image: { type: "jpeg", quality: 0.95 },
    html2canvas: {
      scale: 2,
      windowWidth: element.scrollWidth,
      windowHeight: element.scrollHeight,
    },
    jsPDF: {
      unit: "mm",
      format: "a4",
      orientation: "portrait",
    },
    pagebreak: {
      mode: "avoid-all", // 避免任何元素被分页截断
      before: ".page-break-before", // 在指定元素前强制分页
    },
  };

  html2pdf().set(opt).from(element).save();
}

<div id="long-content">
  <div class="section">第一部分内容...</div>
  <div class="page-break-before"></div>
  <!-- 强制分页点 -->
  <div class="section">第二部分内容...</div>
</div>

function exportLandscapeTable() {
  const element = document.getElementById("wide-table");

  const opt = {
    margin: [10, 10, 10, 10],
    filename: "report-landscape.pdf",
    image: { type: "jpeg", quality: 0.98 },
    html2canvas: { scale: 2 },
    jsPDF: {
      unit: "mm",
      format: [297, 210], // A4 横向：宽 297mm，高 210mm
      orientation: "landscape",
    },
  };

  html2pdf().set(opt).from(element).save();
}

html2pdf()
  .set({
    margin: 10,
    filename: "print-version.pdf",
  })
  .from(document.getElementById("content"))
  .toContainer()
  .then(function () {
    // 在容器生成后、Canvas 渲染前修改内容
    const doc = this.prop.container;
    const buttons = doc.querySelectorAll(".action-buttons");
    buttons.forEach((btn) => btn.remove());
  })
  .toCanvas()
  .toImg()
  .toPdf()
  .save();

// 新 Promise-based 风格（推荐）
html2pdf().set(opt).from(element).save();

// 旧单体风格
html2pdf(element, opt);

// 格式 1：统一边距
margin: 10; // 四边均为 10（jsPDF 单位）

// 格式 2：垂直/水平边距
margin: [10, 20]; // 上下 10，左右 20

// 格式 3：四边独立
margin: [10, 15, 20, 15]; // 上 10，右 15，下 20，左 15

// 避免所有元素被分割，并在 #page2el 前强制分页
html2pdf().set({
  pagebreak: { mode: "avoid-all", before: "#page2el" },
});

// 启用所有模式
html2pdf().set({
  pagebreak: { mode: ["avoid-all", "css", "legacy"] },
});

// 仅使用显式元素控制，不启用自动模式
html2pdf().set({
  pagebreak: {
    before: ".beforeClass",
    after: ["#after1", "#after2"],
    avoid: "img",
  },
});

// 高质量（文件较大）
image: { type: 'jpeg', quality: 0.98 }

// 平衡方案
image: { type: 'jpeg', quality: 0.85 }

// 最小体积（文字可能模糊）
image: { type: 'jpeg', quality: 0.7 }

// PNG 无损（适合含透明内容，但体积大）
image: { type: 'png' }

html2pdf().set({
  html2canvas: {
    scale: 2, // 渲染缩放比例
    useCORS: true, // 允许跨域图片
    allowTaint: false, // 不允许污染 canvas
    backgroundColor: "#ffffff", // 背景色
    logging: false, // 关闭调试日志
    windowWidth: 1200, // 模拟窗口宽度
    windowHeight: 800, // 模拟窗口高度
  },
});

html2pdf().set({
  jsPDF: {
    unit: "mm", // 单位：'pt', 'mm', 'cm', 'in'
    format: "a4", // 页面格式：'a4', 'letter', 'legal' 或 [宽, 高]
    orientation: "portrait", // 方向：'portrait' 或 'landscape'
    compress: true, // 启用压缩
  },
});

// 基础链式
var worker = html2pdf().from(element).save();

// 中间插入自定义操作
html2pdf()
  .from(element)
  .set(opt)
  .toContainer()
  .then(function () {
    // 容器已生成，可在此修改克隆 DOM
    const container = this.prop.container;
    container.querySelector(".hide-in-pdf").style.display = "none";
  })
  .toCanvas()
  .then(function () {
    // Canvas 已生成，可获取 canvas 对象
    const canvas = this.prop.canvas;
    console.log("Canvas size:", canvas.width, "x", canvas.height);
  })
  .toImg()
  .toPdf()
  .get("pdf")
  .then(function (pdf) {
    // 获取 jsPDF 实例，添加页眉页脚
    pdf.setPage(1);
    pdf.setFontSize(20);
    pdf.text("Header", 10, 10);
  })
  .save();

// 获取 canvas 对象
html2pdf()
  .from(element)
  .toCanvas()
  .then(function () {
    const canvas = this.prop.canvas;
    // 可将 canvas 用于其他用途
  });

// 获取图像 DataURL
html2pdf()
  .from(element)
  .toImg()
  .outputImg("datauristring")
  .then(function (dataUri) {
    console.log(dataUri); // data:image/jpeg;base64,...
  });

// 获取 PDF Blob
html2pdf()
  .from(element)
  .toPdf()
  .outputPdf("blob")
  .then(function (blob) {
    // 可上传到服务器
  });

/* 在元素前强制分页 */
.page-break-before {
  break-before: always;
  page-break-before: always; /* 旧版浏览器 */
}

/* 在元素后强制分页 */
.page-break-after {
  break-after: always;
  page-break-after: always;
}

/* 避免元素内部被分页截断 */
.no-break {
  break-inside: avoid;
  page-break-inside: avoid;
}

<div>第一页内容</div>
<div class="html2pdf__page-break"></div>
<div>第二页内容</div>

html2pdf()
  .set({
    pagebreak: {
      mode: "css",
      avoid: ".card, .table-row, .flex-item",
    },
  })
  .from(element)
  .save();

.card,
.table-row,
.flex-item {
  break-inside: avoid;
  page-break-inside: avoid;
}

html2pdf()
  .from(element)
  .set(opt)
  .toPdf()
  .get("pdf")
  .then(function (pdf) {
    const totalPages = pdf.internal.getNumberOfPages();

    for (let i = 1; i <= totalPages; i++) {
      pdf.setPage(i);

      // 页眉
      pdf.setFontSize(10);
      pdf.setTextColor(100);
      pdf.text("Company Name", 10, 10);

      // 页脚
      pdf.text(`Page ${i} of ${totalPages}`, 10, 287);

      // 添加 Logo 图片
      pdf.addImage(logoBase64, "PNG", 180, 5, 20, 20);
    }
  })
  .save();

html2pdf()
  .set({
    image: { type: "jpeg", quality: 0.98 },
    html2canvas: {
      scale: 2, // Retina 屏幕建议 2 或更高
      dpi: 192, // 可选，明确设置 DPI
    },
  })
  .from(element)
  .save();

html2pdf()
  .set({
    html2canvas: {
      useCORS: true,
      allowTaint: false,
    },
  })
  .from(element)
  .save();

<img crossorigin="anonymous" src="https://cdn.example.com/image.jpg" />

await document.fonts.ready;

html2pdf()
  .set({
    html2canvas: { scale: 2 },
  })
  .from(element)
  .save();

const opt = {
  margin: [20, 20, 20, 20], // 增加边距
  html2canvas: {
    scale: 2,
    width: element.clientWidth, // 明确设置宽度
  },
  jsPDF: {
    unit: "mm",
    format: "a4",
    orientation: "portrait",
  },
};

// 降低 scale 以避免超出 canvas 限制
html2pdf()
  .set({
    html2canvas: { scale: 1 }, // 牺牲清晰度换取稳定性
  })
  .from(element)
  .save();

# npm 安装修复版本
npm install eKoopmans/html2pdf.js#bugfix/clone-nodes-BUILD

const maliciousHTML = '<img src=x onerror="alert(document.cookie)">';
html2pdf(maliciousHTML); // 触发 XSS

npm install [email protected] --save

// 单独测试 html2canvas
html2canvas(element).then((canvas) => {
  document.body.appendChild(canvas); // 查看 canvas 输出
});

<script src="jspdf.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="html2pdf.min.js"></script>