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

标签：await 网页 doc JavaScript text pdf PDF const

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

前言

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

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

文章目录

• 探索顶级JavaScript PDF库：高效处理PDF文档的利器
• • 前言
  • 1. jsPDF：一个用于生成PDF文档的JavaScript库
  • • 1.1 jsPDF简介
    • • 1.1.1 主要功能
      • 1.1.2 使用场景
    • 1.2 jsPDF的安装与使用
    • • 1.2.1 安装方法
      • 1.2.2 基本用法示例
      • 1.2.3 配置选项
    • 1.3 jsPDF的高级功能
    • • 1.3.1 图像处理
      • 1.3.2 字体嵌入
      • 1.3.3 表格生成
    • 1.4 实际应用案例
    • • 1.4.1 生成发票
      • 1.4.2 导出报告
  • 2. Pdfmake：一个用于生成PDF的库，由纯JavaScript编写
  • • 2.1 Pdfmake简介
    • • 2.1.1 主要功能
      • 2.1.2 使用场景
    • 2.2 Pdfmake的安装与使用
    • • 2.2.1 安装方法
      • 2.2.2 基本用法示例
      • 2.2.3 配置选项
    • 2.3 Pdfmake的高级功能
    • • 2.3.1 样式定义
      • 2.3.2 自定义字体
      • 2.3.3 分页控制
    • 2.4 实际应用案例
    • • 2.4.1 创建简历
      • 2.4.2 生成合同
  • 3. pdf-lib: 一个用于创建和修改PDF文档的JavaScript库
  • • 3.1 pdf-lib简介
    • • 3.1.1 主要功能
      • 3.1.2 使用场景
    • 3.2 pdf-lib的安装与使用
    • • 3.2.1 安装方法
      • 3.2.2 基本用法示例
      • 3.2.3 配置选项
    • 3.3 pdf-lib的高级功能
    • • 3.3.1 页面编辑
      • 3.3.2 注释添加
      • 3.3.3 图片嵌入
    • 3.4 实际应用案例
    • • 3.4.1 合并PDF文件
      • 3.4.2 修改现有PDF内容
      • 4.2.2 基本用法示例
      • 4.2.3 配置选项
    • 4.3 PDFKit的高级功能
    • • 4.3.1 文本处理
      • 4.3.2 矢量图形
      • 4.3.3 链接与注释
    • 4.4 实际应用案例
    • • 4.4.1 动态生成电子书
      • 4.4.2 创建数据报告
  • 5. Puppeteer: 一个用于控制无头浏览器生成PDF的库
  • • 5.1 Puppeteer简介
    • • 5.1.1 主要功能
      • 5.1.2 使用场景
    • 5.2 Puppeteer的安装与使用
    • • 5.2.1 安装方法
      • 5.2.2 基本用法示例
      • 5.2.3 配置选项
    • 5.3 Puppeteer的高级功能
    • • 5.3.1 网页渲染
      • 5.3.2 自定义视口
      • 5.3.3 截屏功能
    • 5.4 实际应用案例
    • • 5.4.1 爬取网页生成PDF
      • 5.4.2 自动化测试报告导出
  • 6. html-pdf: 一个将HTML转换为PDF的库
  • • 6.1 html-pdf简介
    • • 6.1.1 主要功能
      • 6.1.2 使用场景
    • 6.2 html-pdf的安装与使用
    • • 6.2.1 安装方法
      • 6.2.2 基本用法示例
      • 6.2.3 配置选项
    • 6.3 html-pdf的高级功能
    • • 6.3.1 样式支持
      • 6.3.2 自定义页面设置
      • 6.3.3 支持多种格式
    • 6.4 实际应用案例
    • • 6.4.1 将网页保存为PDF
      • 6.4.2 动态生成营销材料
  • 总结

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', '[email protected]', 'USA'],
    ['John', '[email protected]', '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，非常适合保存网页和生成营销材料。

标签：await,网页,doc,JavaScript,text,pdf,PDF,const
From： https://blog.csdn.net/qq_42531954/article/details/140102482