XuLaLa.Tech

在当今数字化时代，PDF文件因其跨平台兼容性和固定格式的特性，成为了文档分享和打印的首选格式。然而，对于Web开发者来说，将HTML内容转换为PDF文件并非易事，尤其是当需要在客户端直接生成PDF时。无论是生成报告、发票，还是将网页内容保存为PDF，开发者们常常面临诸多挑战，如CSS样式丢失、文本不可选、内容对齐不准确等问题。

本文将深入探讨如何使用JavaScript将HTML内容转换为PDF文件，并介绍两种主流库——html2pdf和jsPDF的使用方法。

文章目录

• 1 一、使用html2pdf库
  • 1.1 I. 基本用法
  • 1.2 II. 解决空白PDF问题
  • 1.3 III. 在新标签页中打开PDF
  • 1.4 IV. CSS不支持问题
  • 1.5 V. PDF文本不可选
• 2 二、使用jsPDF库
  • 2.1 I. 基本用法
  • 2.2 II. 解决CSS不支持问题
  • 2.3 III. 内容居中对齐
  • 2.4 IV. 设置PDF尺寸
• 3 三、最后

一、使用html2pdf库

• 官网地址： https://github.com/spipu/html2pdf

I. 基本用法

html2pdf.js 是一个流行的JavaScript库，它可以将任何网页或元素转换为PDF文件。它基于html2canvas和jsPDF，完全在客户端运行。

let element = document.getElementById('div-to-print');
html2pdf().from(element).save();

II. 解决空白PDF问题

在某些情况下，生成的PDF可能是空白的。这通常是由于版本问题引起的。使用0.9.3版本可以解决这个问题。

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>

III. 在新标签页中打开PDF

默认情况下，html2pdf会下载PDF文件。如果希望在新标签页中打开PDF，可以使用Blob和URL.createObjectURL。

async function printHTML() {
let worker = await html2pdf().from(element).toPdf().output('blob').then((data) => {
let fileURL = URL.createObjectURL(data);
window.open(fileURL);
});
}

IV. CSS不支持问题

html2pdf不支持外部CSS文件。为了解决这个问题，可以使用内联CSS或<style>标签。

<div id="div-to-print" style="color: red;">
<p>This is a sample text.</p>
</div>

V. PDF文本不可选

html2pdf将HTML转换为Canvas图像，因此生成的PDF文本不可选。如果需要可选的文本，可以考虑使用jsPDF。

二、使用jsPDF库

• 官网地址：https://github.com/parallax/jsPDF

I. 基本用法

jsPDF是另一个常用的JavaScript库，它可以直接生成PDF文件，并且支持文本可选。

let doc = new jsPDF();
doc.fromHTML(document.getElementById("div-to-print"), 22, 17, {'width': 400}, function (a) {
let blobPDF = new Blob([doc.output()], { type: 'application/pdf' });
let blobUrl = URL.createObjectURL(blobPDF);
window.open(blobUrl);
});

II. 解决CSS不支持问题

jsPDF原生不支持CSS。如果需要使用CSS，可以结合html2canvas来实现。

III. 内容居中对齐

jsPDF提供了text API，可以通过计算布局来实现内容的居中对齐。

let pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
let pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
let recipientBlock = document.querySelector(".div2-block");
let rHeight = recipientBlock.clientHeight;
let rWidth = recipientBlock.clientWidth;
doc.fromHTML(document.querySelector(".div1-block"), 22, 17, { 'width': 200, 'height': 200 }, function (a) {
doc.fromHTML(document.querySelector(".div2-block"), pageWidth / 2 - rWidth / 4, pageHeight / 2 - rHeight / 4, { 'width': 200, 'height': 200 }, function (a) {
let blobPDF = new Blob([doc.output()], { type: 'application/pdf' });
let blobUrl = URL.createObjectURL(blobPDF);
window.open(blobUrl);
});
});

IV. 设置PDF尺寸

jsPDF允许设置PDF的宽度和高度。建议使用pt作为单位，因为px可能会导致问题。

let doc = new jsPDF({orientation: 'l', unit: 'pt', format: [widthForJsPDF, heightForJsPDF]});

三、最后

通过使用html2pdf和jsPDF，我们可以轻松地将HTML内容转换为PDF文件。尽管这两个库在处理CSS和文本可选性方面存在一些限制，但通过适当的调整和配置，我们仍然可以实现复杂的需求。希望本文能帮助你在项目中成功实现HTML到PDF的转换。