【JavaScript脚本宇宙】从发票生成到网页保存：JavaScript PDF库指南

探索顶级JavaScript PDF库：高效处理PDF文档的利器

前言

随着数字化信息的普及和无纸化办公理念的深入，PDF文档因其高度兼容性和稳定性成为了存储、分享和展示信息的首选格式。为了满足不同用户对PDF文档生成和处理的需求，各类功能强大的JavaScript库应运而生。这篇文章将详细介绍六款知名的JavaScript PDF库，包括它们的主要功能、安装与使用方法、高级功能以及实际应用案例，帮助开发者更好地选择和使用适合自己的工具。

欢迎订阅专栏：JavaScript脚本宇宙

1. jsPDF：一个用于生成PDF文档的JavaScript库

jsPDF官网

1.1 jsPDF简介

1.1.1 主要功能

• 创建新的PDF文档
• 向PDF文档中添加文本、图像和形状
• 自定义页面格式和布局
• 将PDF文档下载或在浏览器中打开

1.1.2 使用场景

• 自动生成发票
• 导出报告或数据表格
• 生成证书或票据

1.2 jsPDF的安装与使用

1.2.1 安装方法

可以通过npm安装jsPDF：

npm install jspdf

或者直接在HTML文件中引入CDN链接：

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

1.2.2 基本用法示例

以下是一个简单的示例，展示如何创建一个包含文本的PDF文档：

import { jsPDF } from "jspdf";// 创建一个新的jsPDF实例
const doc = new jsPDF();// 添加文本到PDF
doc.text("Hello world!", 10, 10);// 保存PDF文档
doc.save("example.pdf");

1.2.3 配置选项

jsPDF支持多种配置选项，例如设置页面尺寸和方向：

const doc = new jsPDF({orientation: 'landscape',unit: 'mm',format: 'a4'
});

1.3 jsPDF的高级功能

1.3.1 图像处理

jsPDF允许你在PDF文档中插入图像：

const imgData = 'data:image/jpeg;base64,...'; // Base64编码的图像数据
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

1.3.2 字体嵌入

你可以将自定义字体嵌入到PDF中：

doc.setFont('courier');
doc.text('This is a sample text with Courier font.', 10, 20);

1.3.3 表格生成

可以使用AutoTable插件来生成复杂的表格：

import autoTable from 'jspdf-autotable';const doc = new jsPDF();
autoTable(doc, {head: [['Name', 'Email', 'Country']],body: [['David', 'david@example.com', 'USA'],['John', 'john@example.com', 'Canada'],],
});
doc.save('table.pdf');

1.4 实际应用案例

1.4.1 生成发票

下面是一个生成发票的完整示例：

const doc = new jsPDF();// 标题
doc.setFontSize(22);
doc.text("Invoice", 105, 30, null, null, "center");// 公司信息
doc.setFontSize(12);
doc.text("Company Name", 10, 50);
doc.text("Address Line 1", 10, 60);
doc.text("Address Line 2", 10, 70);// 客户信息
doc.text("Customer Name", 140, 50);
doc.text("Customer Address Line 1", 140, 60);
doc.text("Customer Address Line 2", 140, 70);// 发票内容
doc.text("Description", 10, 100);
doc.text("Amount", 140, 100);
doc.text("Product 1", 10, 110);
doc.text("$100", 140, 110);// 保存发票
doc.save("invoice.pdf");

1.4.2 导出报告

以下是一个导出报告的完整示例：

const doc = new jsPDF();// 标题
doc.setFontSize(18);
doc.text("Monthly Report", 105, 20, null, null, "center");// 作者信息
doc.setFontSize(12);
doc.text("Author: John Doe", 10, 30);// 报告内容
doc.setFontSize(14);
doc.text("Section 1: Introduction", 10, 50);
doc.setFontSize(12);
doc.text("This is an introductory section of the monthly report.", 10, 60);doc.setFontSize(14);
doc.text("Section 2: Data Analysis", 10, 80);
doc.setFontSize(12);
doc.text("This section contains data analysis results.", 10, 90);// 保存报告
doc.save("report.pdf");

2. Pdfmake：一个用于生成PDF的库，由纯JavaScript编写

2.1 Pdfmake简介

Pdfmake 是一个由纯JavaScript编写的强大且灵活的PDF生成库。它支持创建复杂的PDF文档，并且能够使用浏览器和Node.js进行渲染。

2.1.1 主要功能

• 文本处理：支持多种文本样式、对齐方式和段落格式。
• 图像插入：可以插入本地图片或通过URL加载图片。
• 表格支持：内置了丰富的表格功能，支持合并单元格等。
• 矢量图形：支持绘制基本的几何形状，如线条、矩形和圆形。
• 自定义字体：允许嵌入自定义字体文件。
• 分页控制：支持页眉、页脚和分页符。

2.1.2 使用场景

• 报表生成：企业财务报表、年度报告等文档生成。
• 合同管理：自动生成具有标准格式的合同文档。
• 简历制作：根据模板快速生成个人简历。

2.2 Pdfmake的安装与使用

2.2.1 安装方法

你可以通过npm来安装pdfmake：

npm install pdfmake

或者直接在HTML页面中通过CDN引入：

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

2.2.2 基本用法示例

以下是一个简单的示例，展示如何使用pdfmake生成一个包含基本文本的PDF：

var pdfMake = require('pdfmake/build/pdfmake.js');
var vfsFonts = require('pdfmake/build/vfs_fonts.js');pdfMake.vfs = vfsFonts.pdfMake.vfs;var docDefinition = {content: ['这是一个简单的PDF文档']
};pdfMake.createPdf(docDefinition).download('sample.pdf');

2.2.3 配置选项

Pdfmake 提供了一些基本的配置选项，例如页面大小和边距：

var docDefinition = {pageSize: 'A4',pageMargins: [40, 60, 40, 60],content: ['这是一份配置了页面大小和边距的PDF文档']
};

更多详细配置可参考官方文档。

2.3 Pdfmake的高级功能

2.3.1 样式定义

可以为文本和其他内容定义样式：

var docDefinition = {content: [{ text: '标题', style: 'header' },{ text: '正文内容', style: 'body' }],styles: {header: {fontSize: 22,bold: true},body: {fontSize: 12}}
};

2.3.2 自定义字体

为了使用自定义字体，你需要首先将字体文件转换成base64格式，然后将其添加到vfs_fonts.js中：

var docDefinition = {content: [{ text: '使用自定义字体的文本', font: 'myFont' }],defaultStyle: {font: 'myFont'},fonts: {myFont: {normal: 'path/to/font.ttf',bold: 'path/to/font-bold.ttf',italics: 'path/to/font-italics.ttf',bolditalics: 'path/to/font-bolditalics.ttf'}}
};

2.3.3 分页控制

可以轻松添加页眉、页脚以及分页符：

var docDefinition = {content: ['第一页的内容',{ text: '', pageBreak: 'after' },'第二页的内容'],footer: function(currentPage, pageCount) {return { text: currentPage.toString() + ' / ' + pageCount, alignment: 'center' };}
};

2.4 实际应用案例

2.4.1 创建简历

下面是一个生成简历的完整示例：

var docDefinition = {content: [{ text: '个人简历', style: 'header' },{ text: '姓名：张三', style: 'subheader' },{ text: '联系方式：1234567890', style: 'subheader' },{ text: '教育背景', style: 'subheader' },{ text: 'XX大学，计算机科学与技术专业，本科', style: 'content' },{ text: '工作经历', style: 'subheader' },{ text: 'XX公司，软件工程师，2018-2020', style: 'content' }],styles: {header: { fontSize: 18, bold: true },subheader: { fontSize: 14, margin: [0, 10, 0, 5] },content: { fontSize: 12 }}
};pdfMake.createPdf(docDefinition).download('resume.pdf');

2.4.2 生成合同

以下是一个生成简单合同的示例：

var docDefinition = {content: [{ text: '合同', style: 'header', alignment: 'center' },{ text: '甲方：XXX公司', style: 'subheader' },{ text: '乙方：YYY公司', style: 'subheader' },{ text: '合同内容', style: 'subheader' },{ text: '甲乙双方经友好协商，一致同意达成以下协议...', style: 'content' }],styles: {header: { fontSize: 18, bold: true },subheader: { fontSize: 14, margin: [0, 10, 0, 5] },content: { fontSize: 12 }}
};pdfMake.createPdf(docDefinition).download('contract.pdf');

以上所有代码实例均可用于真实项目，更多详细信息请访问pdfmake官方文档。

3. pdf-lib: 一个用于创建和修改PDF文档的JavaScript库

3.1 pdf-lib简介

pdf-lib是一个强大的开源JavaScript库，允许开发者在不依赖于第三方软件的情况下创建、修改和阅读PDF文件。它具有高性能和高度可定制的特点，非常适合用于各种Web应用和Node.js项目。

3.1.1 主要功能

• 创建PDF文档：能够从头开始创建新的PDF文档。
• 修改现有PDF：支持对已有的PDF进行编辑，如添加文本、图像、页面等。
• 合并PDF文件：可以将多个PDF文件合并为一个。
• 嵌入图像和字体：支持多种图像格式和自定义字体的嵌入。
• 注释和标注：提供丰富的注释和标注功能。

3.1.2 使用场景

• 生成发票或报告：通过代码自动化生成企业所需的各类发票或业务报告。
• 在线表单填充：动态地填充用户提交信息到PDF模板中。
• 电子书制作：用来制作和发布电子书或宣传册。
• 合同签署：方便地增添电子签名和日期，在数字合同上进行操作。

3.2 pdf-lib的安装与使用

3.2.1 安装方法

要在项目中使用pdf-lib，首先需要通过npm或yarn进行安装：

npm install pdf-lib
# or
yarn add pdf-lib

3.2.2 基本用法示例

以下是一个创建简单PDF文档的示例：

import { PDFDocument, rgb } from 'pdf-lib';async function createPdf() {const pdfDoc = await PDFDocument.create();const page = pdfDoc.addPage([600, 400]);page.drawText('Hello, world!', {x: 50,y: 350,size: 30,color: rgb(0, 0.53, 0.71),});const pdfBytes = await pdfDoc.save();// 在浏览器环境下，可以使用 Blob 对象下载 PDFconst blob = new Blob([pdfBytes], { type: 'application/pdf' });const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.download = 'example.pdf';link.click();
}createPdf();

更多详细信息请访问官方文档.

3.2.3 配置选项

在创建和修改PDF时，pdf-lib提供了多种配置选项，例如：

• drawText方法接受的配置对象：
  • x, y: 坐标位置
  • size: 字体大小
  • color: 文本颜色
  • font: 自定义字体

具体配置选项及其详细解释，请参考官方API文档.

3.3 pdf-lib的高级功能

3.3.1 页面编辑

你可以对现有PDF文档的页面进行编辑，例如添加新页面、复制页面等：

import { PDFDocument } from 'pdf-lib';async function editPdf() {const pdfDoc = await PDFDocument.load(existingPdfBytes);const pages = pdfDoc.getPages();const firstPage = pages[0];firstPage.drawText('Adding new text!', { x: 50, y: 500, size: 20 });const pdfBytes = await pdfDoc.save();// 下载新的 PDF 文件...
}editPdf();

3.3.2 注释添加

可以在PDF中添加注释和标注：

import { PDFDocument, rgb } from 'pdf-lib';async function addAnnotation() {const pdfDoc = await PDFDocument.load(existingPdfBytes);const pages = pdfDoc.getPages();const firstPage = pages[0];const textAnnotation = {title: 'Note',contents: 'This is a sample annotation.',color: rgb(1, 1, 0),  // 黄色x: 50,y: 500,};firstPage.addAnnotation(textAnnotation);const pdfBytes = await pdfDoc.save();// 下载新的 PDF 文件...
}addAnnotation();

3.3.3 图片嵌入

你可以在PDF文档中嵌入图片：

import { PDFDocument, rgb } from 'pdf-lib';async function embedImage() {const pdfDoc = await PDFDocument.create();const page = pdfDoc.addPage([600, 400]);const jpgUrl = 'https://pdf-lib.js.org/assets/cat_riding_unicorn.jpg';const jpgImageBytes = await fetch(jpgUrl).then(res => res.arrayBuffer());const jpgImage = await pdfDoc.embedJpg(jpgImageBytes);const jpgDims = jpgImage.scale(0.5);page.drawImage(jpgImage, {x: 50,y: 200,width: jpgDims.width,height: jpgDims.height,});const pdfBytes = await pdfDoc.save();// 下载包含图片的 PDF 文件...
}embedImage();

3.4 实际应用案例

3.4.1 合并PDF文件

以下是如何合并两个PDF文件的示例：

import { PDFDocument } from 'pdf-lib';async function mergePdfs(pdfBytes1, pdfBytes2) {const pdfDoc = await PDFDocument.create();const [firstPdf] = await PDFDocument.load(pdfBytes1);const [secondPdf] = await PDFDocument.load(pdfBytes2);const copiedPagesA = await pdfDoc.copyPages(firstPdf, firstPdf.getPageIndices());copiedPagesA.forEach((page) => {pdfDoc.addPage(page);});const copiedPagesB = await pdfDoc.copyPages(secondPdf, secondPdf.getPageIndices());copiedPagesB.forEach((page) => {pdfDoc.addPage(page);});const mergedPdfBytes = await pdfDoc.save();// 下载合并后的 PDF 文件...
}mergePdfs(pdf1Bytes, pdf2Bytes);

3.4.2 修改现有PDF内容

以下是如何修改现有PDF内容的示例：

import { PDFDocument, rgb } from 'pdf-lib';async function modifyPdf(pdfBytes) {const pdfDoc = await PDFDocument.load(pdfBytes);const pages = pdfDoc.getPages();const firstPage = pages[0];firstPage.drawText('Modified text', {x: 50,y: 700,size: 25,color: rgb(1, 0, 0),});const modifiedPdfBytes = await pdfDoc.save();// 下载修改后的 PDF 文件...
}modifyPdf(existingPdfBytes);

更多关于pdf-lib的信息和实例代码，请访问��GitHub仓库.

# PDF生成库## 4. PDFKit: 用于创建和操作PDF文档的库### 4.1 PDFKit简介PDFKit 是一个功能强大的库，用于在 Node.js 环境中创建和操作 PDF 文档。无论是简单的文本插入、复杂的图形处理，还是嵌入链接和注释，PDFKit 都能满足各种需求。#### 4.1.1 主要功能
- **文本添加**：可以在 PDF 中插入单行或多行文本。
- **矢量图形**：支持绘制点、线、多边形、贝塞尔曲线等矢量图形。
- **图像插入**：能够将图片嵌入到 PDF 文档中。
- **链接与注释**：可以在 PDF 中添加超链接和注释。
- **表单与交互**：创建可填写的表单，支持用户交互。#### 4.1.2 使用场景
- **动态文档生成**：如生成电子书、发票、报表等。
- **数据可视化报告**：生成包含图表和数据分析结果的 PDF 报告。
- **品牌宣传材料**：制作公司宣传手册、产品介绍等。### 4.2 PDFKit的安装与使用#### 4.2.1 安装方法
要开始使用 PDFKit，需要先在项目中安装该包。可以使用 npm 或 yarn 进行安装：```bash
npm install pdfkit

或者

yarn add pdfkit

4.2.2 基本用法示例

以下是一个简单的示例，展示如何使用 PDFKit 创建一个包含文本和图片的 PDF 文档：

const PDFDocument = require('pdfkit');
const fs = require('fs');// 创建一个新文档
const doc = new PDFDocument();// 将 PDF 文档保存到文件系统
doc.pipe(fs.createWriteStream('output.pdf'));// 添加文字
doc.fontSize(25).text('Hello, PDFKit!', 100, 100);// 插入图片
doc.image('path/to/image.png', {fit: [250, 300],align: 'center',valign: 'center'
});// 结束并保存 PDF 文档
doc.end();

更多详细信息请参见 PDFKit 官方文档.

4.2.3 配置选项

PDFKit 提供了多种配置选项，以便定制 PDF 文档的各个方面，例如页面大小、页边距、字体设置等。以下是一些常见的配置选项：

const doc = new PDFDocument({size: 'A4', // 页面大小margin: 50, // 页边距info: { // 文档元数据Title: 'Sample PDF',Author: 'John Doe',Subject: 'Demonstration of PDFKit',Keywords: 'PDF, JavaScript, Node.js'}
});

4.3 PDFKit的高级功能

4.3.1 文本处理

PDFKit 支持丰富的文本处理功能，包括对齐方式、字体样式、行间距等。如下所示：

doc.font('Helvetica-Bold').fontSize(18).text('This is a bold text.', {width: 410,align: 'left'});doc.moveDown().font('Times-Roman').fontSize(12).text('This is a normal text with a line break.', {width: 410,align: 'justify',lineGap: 10});

4.3.2 矢量图形

除了文本，PDFKit 还支持绘制各种矢量图形，如下所示：

// 绘制矩形
doc.rect(100, 150, 200, 100).fill('#FF3300');// 绘制圆形
doc.circle(300, 300, 50).stroke();

4.3.3 链接与注释

您可以在 PDF 文档中添加超链接和注释：

// 添加超链接
doc.text('Visit Google', 100, 400).underline(100, 400, 160, 27, {color: '#0000FF'}).link(100, 400, 160, 27, 'http://www.google.com');// 添加注释
doc.annotate(100, 450, 160, 27, {Subtype: 'Text',Contents: 'This is an annotation'
});

4.4 实际应用案例

4.4.1 动态生成电子书

下面是一个动态生成电子书的示例代码：

const PDFDocument = require('pdfkit');
const fs = require('fs');function createEbook(title, author, chapters) {const doc = new PDFDocument();doc.pipe(fs.createWriteStream(`${title}.pdf`));doc.fontSize(25).text(title, { align: 'center' });doc.fontSize(20).text(`by ${author}`, { align: 'center' });doc.addPage();chapters.forEach((chapter, index) => {doc.fontSize(18).text(`Chapter ${index + 1}: ${chapter.title}`);doc.fontSize(14).text(chapter.content);doc.addPage();});doc.end();
}const chapters = [{ title: "Introduction", content: "This is the introduction chapter." },{ title: "Chapter 1", content: "This is the first chapter." },{ title: "Conclusion", content: "This is the conclusion chapter." }
];createEbook("My Ebook", "Author Name", chapters);

4.4.2 创建数据报告

下面是一个创建数据报告的示例代码：

const PDFDocument = require('pdfkit');
const fs = require('fs');function createReport(data) {const doc = new PDFDocument();doc.pipe(fs.createWriteStream('report.pdf'));doc.fontSize(25).text('Data Report', { align: 'center' });data.forEach(item => {doc.addPage();doc.fontSize(18).text(item.title);doc.fontSize(14).text(JSON.stringify(item.data, null, 2));});doc.end();
}const data = [{ title: "Section 1", data: { key1: "value1", key2: "value2" } },{ title: "Section 2", data: { keyA: "valueA", keyB: "valueB" } }
];createReport(data);

以上是关于 PDFKit 的介绍及其基本和高级功能的示例。如果你希望了解更多，可以访问 PDFKit 官方文档。

5. Puppeteer: 一个用于控制无头浏览器生成PDF的库

5.1 Puppeteer简介

Puppeteer是一个Node库，它提供了一个高级API来通过DevTools协议控制Chromium或Chrome。它非常适合用于生成PDF、截图和网页自动化。

5.1.1 主要功能

• 生成网页PDF：Puppeteer可以将整个网页渲染并输出为PDF格式。
• 截屏：可以生成指定网页的屏幕截图。
• 模拟用户操作：如点击、输入文本等操作，便于测试。
• 抓取网页内容：可以获取网页中的DOM元素和属性值。

5.1.2 使用场景

• 测试自动化：用于E2E（端到端）测试，模拟用户操作进行流程测试。
• 网页抓取：抓取网页内容并生成PDF报告。
• 内容转化：将网页内容转换为PDF文档，便于存档和分享。

5.2 Puppeteer的安装与使用

5.2.1 安装方法

Puppeteer可以通过npm安装：

npm install puppeteer

详细安装说明请参考 Puppeteer官方文档.

5.2.2 基本用法示例

以下是一个基本的例子，通过Puppeteer生成一个网页的PDF：

const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://example.com');await page.pdf({ path: 'example.pdf', format: 'A4' });await browser.close();
})();

5.2.3 配置选项

Puppeteer在生成PDF时支持多种配置选项：

• path：保存PDF文件的路径。
• format：页面格式，如’A4’、'Letter’等。
• printBackground：是否打印背景图像。
• landscape：是否横向打印。

更多配置选项请参考 Puppeteer PDF选项.

5.3 Puppeteer的高级功能

5.3.1 网页渲染

Puppeteer可以渲染复杂的网页，包括动态加载的内容：

(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://example.com', { waitUntil: 'networkidle2' });await page.pdf({ path: 'example.pdf', format: 'A4' });await browser.close();
})();

5.3.2 自定义视口

可以自定义浏览器的视口大小，以模拟不同设备的显示效果：

(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.setViewport({ width: 1280, height: 800 });await page.goto('https://example.com');await page.pdf({ path: 'example.pdf', format: 'A4' });await browser.close();
})();

5.3.3 截屏功能

Puppeteer还可以生成网页截图：

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

5.4 实际应用案例

5.4.1 爬取网页生成PDF

以下代码示例展示了如何爬取网页内容并生成PDF：

const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://news.ycombinator.com/', { waitUntil: 'networkidle2' });await page.pdf({ path: 'hackernews.pdf', format: 'A4' });await browser.close();
})();

5.4.2 自动化测试报告导出

通过Puppeteer可以自动执行测试并将结果导出为PDF报告：

const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();// 模拟用户登录操作await page.goto('https://example.com/login');await page.type('#username', 'your-username');await page.type('#password', 'your-password');await page.click('#login-button');await page.waitForNavigation();await page.screenshot({ path: 'test-result.png' });await page.pdf({ path: 'test-report.pdf', format: 'A4' });await browser.close();
})();

更多详细信息请参考Puppeteer官方文档。

6. html-pdf: 一个将HTML转换为PDF的库

6.1 html-pdf简介

html-pdf 是一个用于将HTML内容转换为PDF文件的Node.js库。它可以轻松地将网页内容、动态生成的HTML或任何包含HTML标记的文本渲染成高质量的PDF文档。

6.1.1 主要功能

• 将HTML内容转换为PDF文件。
• 支持CSS样式和自定义页面设置。
• 可以通过JavaScript进行强大的配置和控制。
• 支持添加页眉、页脚及各种格式的嵌入。

6.1.2 使用场景

html-pdf 适用于以下场景：

• 自动生成报告、发票、合同等文档。
• 将网页保存为PDF以便离线访问或打印。
• 动态生成营销材料，如宣传册和广告单。

6.2 html-pdf的安装与使用

6.2.1 安装方法

要使用html-pdf，首先需要安装Node.js和npm。然后，可以通过以下命令安装该库：

npm install html-pdf --save

6.2.2 基本用法示例

下面是一个简单的例子，它展示了如何将一段HTML字符串转换为PDF并保存到文件中：

const fs = require('fs');
const pdf = require('html-pdf');
const html = '<h1>这是一个标题</h1><p>这是一个段落。</p>';pdf.create(html).toFile('./document.pdf', (err, res) => {if (err) return console.log(err);console.log(res);
});

6.2.3 配置选项

html-pdf 提供了许多配置选项，使得生成的PDF更加灵活。以下是一些常用的配置选项：

• format: 页面格式（如’A4’, ‘A3’, ‘Letter’, 'Legal’等）。
• orientation: 页面方向（‘portrait’ 或 ‘landscape’）。
• border: 页面边距，可设置为’10mm’, ‘1cm’, '10px’等。

示例代码：

const options = {format: 'A4',orientation: 'portrait',border: '10mm'
};pdf.create(html, options).toFile('./document.pdf', (err, res) => {if (err) return console.log(err);console.log(res);
});

6.3 html-pdf的高级功能

6.3.1 样式支持

html-pdf 完全支持CSS样式。你可以在HTML中直接写CSS，也可以引用外部CSS文件。

const html = `
<!DOCTYPE html>
<html>
<head>
<style>h1 { color: blue; }p { font-size: 16px; }
</style>
</head>
<body><h1>这是蓝色的标题</h1><p>这是带有字体大小的段落。</p>
</body>
</html>
`;pdf.create(html).toFile('./styledDocument.pdf', (err, res) => {if (err) return console.log(err);console.log(res);
});

6.3.2 自定义页面设置

你可以通过配置选项来自定义页面设置，例如页眉和页脚。

const options = {header: {height: "45mm",contents: '<div style="text-align: center;">这是页眉</div>'},footer: {height: "28mm",contents: {first: 'Cover page', // 在第一页显示2: 'Second page', // 在第二页显示default: '<span style="color: #444;">{{page}}</span>/<span>{{pages}}</span>', // 默认显示last: 'Last Page' // 在最后一页显示}}
};pdf.create(html, options).toFile('./customHeaderFooter.pdf', (err, res) => {if (err) return console.log(err);console.log(res);
});

6.3.3 支持多种格式

除了常见的A4和Letter格式，html-pdf 还支持其他不同的格式，你可以根据需求选择合适的页面尺寸。

const options = {format: 'Letter',orientation: 'landscape'
};pdf.create(html, options).toFile('./letterLandscape.pdf', (err, res) => {if (err) return console.log(err);console.log(res);
});

6.4 实际应用案例

6.4.1 将网页保存为PDF

假设我们有一个网页，并希望将其保存为PDF，可以如下操作：

const request = require('request');
const url = 'http://example.com';request(url, (error, response, body) => {if (!error && response.statusCode == 200) {pdf.create(body).toFile('./webpage.pdf', (err, res) => {if (err) return console.log(err);console.log(res);});} else {console.log('请求失败:', error);}
});

6.4.2 动态生成营销材料

你可以使用模板引擎（例如Handlebars）动态生成HTML，然后将其转换为PDF。例如：

const Handlebars = require('handlebars');const templateHtml = `
<!DOCTYPE html>
<html>
<head><title>{{title}}</title>
</head>
<body><h1>{{heading}}</h1><p>{{message}}</p>
</body>
</html>
`;const data = {title: '营销材料',heading: '欢迎您的加入!',message: '感谢您对我们的信任，我们将竭诚为您服务。'
};const compiledTemplate = Handlebars.compile(templateHtml);
const html = compiledTemplate(data);pdf.create(html).toFile('./marketingMaterial.pdf', (err, res) => {if (err) return console.log(err);console.log(res);
});

更多信息请参考html-pdf官网。

总结

总结起来，这六款JavaScript PDF库各有特色，能够满足从简单到复杂的各种PDF文档处理需求。jsPDF以其简单易用和丰富的配置选项而著称，适合快速生成发票和报告。Pdfmake则支持复杂的样式定义和自定义字体，非常适合创建简历和合同。pdf-lib专注于PDF内容的编辑和修改，功能强大，是合并和注释PDF的不二选择。PDFKit则在文本处理和矢量图形方面表现出色，适用于动态生成电子书和数据报告。Puppeteer除了生成PDF外，还能进行网页渲染和自动化测试。而html-pdf则专门用于将HTML内容转换为PDF，非常适合保存网页和生成营销材料。