【JavaScript脚本宇宙】从发票生成到网页保存：JavaScript PDF库指南
探索顶级JavaScript PDF库：高效处理PDF文档的利器
前言
随着数字化信息的普及和无纸化办公理念的深入，PDF文档因其高度兼容性和稳定性成为了存储、分享和展示信息的首选格式。为了满足不同用户对PDF文档生成和处理的需求，各类功能强大的JavaScript库应运而生。这篇文章将详细介绍六款知名的JavaScript PDF库，包括它们的主要功能、安装与使用方法、高级功能以及实际应用案例，帮助开发者更好地选择和使用适合自己的工具。
欢迎订阅专栏：JavaScript脚本宇宙
文章目录
1. jsPDF：一个用于生成PDF文档的JavaScript库
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 对象下载 PDF
const 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，非常适合保存网页和生成营销材料。
原文地址：https://blog.csdn.net/qq_42531954/article/details/140102482
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！