HTML 到 PDF JavaScript

在现代网页开发中，我们经常需要将网页内容转换为 PDF 文件，以便于打印、打包等需要离线使用的场景。本文将介绍一些基于 JavaScript 的库，可以快速将 HTML 转换为 PDF。

1. jsPDF

jsPDF 是一个功能强大的 JavaScript PDF 库，可以使用 HTML5 Canvas 和 SVG 元素创建 PDF 文件。它支持多种字体、颜色、图像和页面布局，而且还可以添加文本、图形和链接等元素。使用 jsPDF 可以轻松地将 HTML 转换为 PDF，但需要手动渲染元素。

安装

在 HTML 中引入 jsPDF 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

使用

var doc = new jsPDF();
doc.fromHTML('HTML 元素', 15, 15, {
    'width': 170,
});
doc.save('file.pdf');

其中，fromHTML() 方法可以将一个 HTML 元素渲染到 PDF 中，第一个参数为 HTML 元素的选择器或 HTML 字符串，第二个和第三个参数为 PDF 中元素的坐标，第四个参数对象包含一些渲染选项，如元素宽度等。

save() 方法可以将 PDF 保存为文件。

2. pdfmake

pdfmake 是一个基于 JavaScript 的 PDF 生成器，使用简单、灵活性高。它可以快速生成 PDF，支持多种字体、颜色、图像和表格等元素，还能够生成一个包含多页的 PDF 文件。pdfmake 不需要手动渲染元素，只需通过 JSON 定义文档的结构和内容。

安装

在 HTML 中引入 pdfmake 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/vfs_fonts.js"></script>

使用

var docDefinition = {
    content: [
        { text: 'Hello World!', fontSize: 15 },
        { text: 'PDFMake: Another PDF generation library for Node.js', fontSize: 10 },
    ]
};
pdfMake.createPdf(docDefinition).download('file.pdf');

其中，docDefinition 对象定义了 PDF 中的内容和样式，createPdf() 方法可以将其转换为 PDF，download() 方法可以将 PDF 保存为文件。

3. Puppeteer

Puppeteer 是一个由 Google 开发的 Node.js 库，可以编写各种自动化浏览器任务。它可以加载网页、获取元素、生成 PDF、截取屏幕等，非常强大。使用 Puppeteer 可以像正常的浏览器一样渲染页面，并将页面转换为 PDF。

安装

npm install puppeteer

使用

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('http://example.com');
    await page.pdf({ path: 'file.pdf' });
    await browser.close();
})();

其中，launch() 方法可以启动一个新的 Chromium 浏览器实例，newPage() 方法可以创建一个新的页面，goto() 方法可以打开一个网页，pdf() 方法可以将页面转换为 PDF，path 参数指定 PDF 的保存路径。

以上就是三种将 HTML 转换为 PDF 的 JavaScript 库，开发者可以根据实际需求选择合适的库来使用。