html2pdf.js 是一个HTML的dom元素内容转 PDF 文件插件-BFW插件库

html2pdf.js 是一个HTML的dom元素内容转 PDF 文件插件

html2pdf.js 是一个客户端的 HTML 转 PDF 渲染工具，使用纯 JavaScript 实现。它结合了 html2canvas 和 jsPDF 两个库，能够将网页或网页元素转换为可打印的 PDF 文件。html2pdf.js 完全在客户端运行，无需服务器支持，非常适合需要在浏览器中直接生成 PDF 的场景。

html2pdf.js 用法

快速启动

通过 CDN 引入库：

<script src="//repo.bfw.wiki/bfwrepo/js/html2pdf.bundle.min.js" ></script>

编写 JavaScript 代码：

function generatePDF() {
  var element = document.getElementById('element-to-print');
  html2pdf().from(element).save();
}

HTML 结构：

<div id="element-to-print">
  <h1>这是一个标题</h1>
  <p>这是一些内容。</p>
</div>
<button onclick="generatePDF()">生成 PDF</button>

高级配置

html2pdf.js 提供了丰富的配置选项，可以通过链式调用来进行高级设置，例如设置页面大小、边距、图像类型和质量等。

html2pdf().set({
  margin: 1,
  filename: 'document.pdf',
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: { scale: 2 },
  jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
}).from(element).save();

应用案例和最佳实践

长页面处理：对于长页面，html2pdf.js 可能会遇到渲染问题，因为 canvas 有最大高度和宽度的限制。解决方法是将页面拆分为较小的区块，然后分别添加到 PDF 中。
高级配置：通过配置选项，可以设置页面边距、文件名、图像类型和质量等，以满足不同的需求。

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

</head>
<body>
 <script src="//repo.bfw.wiki/bfwrepo/js/html2pdf.bundle.min.js" ></script>
<script>
  function generatePDF() {
  var element = document.getElementById('element-to-print');
  html2pdf().from(element).save();
}  
</script>


<div id="element-to-print">
  <h1>这是一个标题</h1>
  <p>这是一些内容。</p>
</div>
<button onclick="generatePDF()">生成 PDF</button>
</body>
</html>