自学内容网 自学内容网

【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 对象下载 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)!