简介
Chrome-pdf 是一个基于 headless Chrome（无界面浏览器）的 npm 包，可以将 html 文件或内容生成 PDF 文件。它可以定制化生成的 PDF 文件的大小、方向以及是否显示页码等属性，还可以设置多个页面和单个页面生成不同的 PDF 文件。
在前端开发中，我们经常需要将一些网页内容生成 PDF 文件，以满足客户或者网站用户的需求，Chrome-pdf 是一个非常有用的工具，可以帮助我们完成这个任务。接下来，我们将对 Chrome-pdf 的使用方法进行详细介绍。
安装
首先，我们需要安装 Chrome-pdf，使用以下命令进行安装。
npm install chrome-pdf
使用方法
Chrome-pdf 提供了两种生成 PDF 文件的方式，一种是将 HTML 文件转换为 PDF，另一种是将 HTML 内容转换为 PDF。以下将分别介绍两种方式的使用方法。
将 HTML 文件转换为 PDF
以下是将 HTML 文件转换为 PDF 的使用方法示例。
const chromePdf = require('chrome-pdf');
const fs = require('fs');
const path = require('path');
const options = {
printBackground: true,
displayHeaderFooter: true,
landscape: true
};
const filePath = path.join(__dirname, 'test.html');
const outputPath = path.join(__dirname, 'test.pdf');
chromePdf.generatePdf(fs.readFileSync(filePath), options, (pdf) => {
fs.writeFileSync(outputPath, pdf);
});在以上示例中，我们使用了 Chrome-pdf 提供的 generatePdf 方法，并传入了 HTML 文件的内容，以及一些 PDF 文件的生成参数，如 printBackground（是否打印背景色）、displayHeaderFooter（是否显示页眉页脚）、landscape（是否横向打印）等。然后，我们使用 fs.writeFileSync 将生成后的 PDF 文件写入本地磁盘。
将 HTML 内容转换为 PDF
以下是将 HTML 内容转换为 PDF 的使用方法示例。
const chromePdf = require('chrome-pdf');
const fs = require('fs');
const path = require('path');
const options = {
printBackground: true,
displayHeaderFooter: true,
landscape: true
};
const htmlContent = '<html><head><title>test</title></head><body>hello world!</body></html>';
const outputPath = path.join(__dirname, 'test.pdf');
chromePdf.generatePdf(htmlContent, options, (pdf) => {
fs.writeFileSync(outputPath, pdf);
});在以上示例中，我们传入了 HTML 内容，其余过程与将 HTML 文件转换为 PDF 的方式类似。
参数说明
以下是 Chrome-pdf 可配置的参数说明。
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| scale | 数值 | 1 | 缩放比例 |
| displayHeaderFooter | 布尔 | false | 是否显示页眉页脚 |
| headerTemplate | 字符串 | '' | 页眉模板 |
| footerTemplate | 字符串 | '' | 页脚模板 |
| printBackground | 布尔 | false | 是否打印背景色 |
| landscape | 布尔 | false | 是否横向打印 |
| pageRanges | 字符串 | '' | 打印的页数范围 |
| format | 字符串 | 'A4' | PDF 文件格式 |
| width | 字符串/数值 | '' | 页面宽度 |
| height | 字符串/数值 | '' | 页面高度 |
| marginTop | 字符串/数值 | '' | 顶部边距 |
| marginBottom | 字符串/数值 | '' | 底部边距 |
| marginLeft | 字符串/数值 | '' | 左侧边距 |
| marginRight | 字符串/数值 | '' | 右侧边距 |
| preferCSSPageSize | 布尔 | false | 是否使用 CSS 页面大小 |
结语
通过本文，我们了解了 Chrome-pdf 的基本使用方法。除了生成 PDF 文件以外，Chrome-pdf 还提供了许多可配置的参数，可以根据需要进行定制。Chrome-pdf 是一个非常实用的前端工具，可以帮助我们更方便地处理和生成 PDF 文件。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c89