简述
wkhtmltopdf 是一款开源、跨平台的 HTML 转 PDF 工具，支持各种 HTML 元素和 CSS 样式，可以生成高质量的 PDF 文档。对于那些需要将网页内容转换为 PDF 文档的前端开发者或者其他领域的开发者来说，wkhtmltopdf 是一个非常强大实用的工具。
但是，wkhtmltopdf 的安装和使用却并不是很方便。在 Windows 平台上尤其如此，需要安装额外的依赖库和配置环境变量等操作。适应不同系统和版本的 wkhtmltopdf 编译版本也不是很容易。幸运的是，现在有一个 npm 包 wkhtmltox-montserrat，它包含了预编译好的 wkhtmltopdf 库文件和字体文件，可以直接在 Node.js 环境中使用。
本文将介绍如何使用 npm 包 wkhtmltox-montserrat，在前端项目中使用 wkhtmltopdf，以及一些常见问题的解决方案。
安装
安装 wkhtmltox-montserrat 只需在项目目录中运行以下命令：
npm install wkhtmltox-montserrat
此时，会在项目中自动安装预编译好的 wkhtmltopdf 库文件和字体文件。
如果由于墙的原因安装不了，可以考虑使用 cnpm 或者使用淘宝源。
使用
下载和安装了 wkhtmltox-montserrat 后，我们就可以在前端项目中使用 wkhtmltopdf 工具，生成 PDF 文档了。首先，我们需要引入 wkhtmltopdf 模块：
const wkhtmltopdf = require('wkhtmltox-montserrat');接着，我们可以使用以下方法调用 wkhtmltopdf：
wkhtmltopdf(source [, options]) .pipe(destination)
其中，source 参数可以是本地 HTML 文件、URL、已经渲染好的 HTML 字符串，也可以是一个可读流对象。而 destination 则可以是本地文件路径、可写流对象，或者可以返回可写流的函数。
下面是一个使用示例，将本地的 index.html 文件转为 PDF 文档并保存到本地的 output.pdf 文件中：
-- -------------------- ---- ------- ----- -- - -------------- ----- ---- - ---------------- ----- ----------- - -------------------------------- ----- ------ - ----------------------- -------------- ----- ----------- - -------------------------------------------- --------------- --------------------------------------
通过命令行运行 node index.js 即可看到生成的 output.pdf 文件。如果在浏览器中打开该文件，会看到一个包含 index.html 的页面的 PDF 版本。
选项
在调用 wkhtmltopdf 方法时，可以通过 options 参数指定一些选项，包括但不限于以下内容：
pageSize: 页面大小和方向，默认为 A4 纸和纵向，可以设置为宽高，例如{width: '210mm', height: '297mm', orientation: 'landscape'}。encoding: 编码格式，默认为 UTF-8。header和footer: 头部和底部，可以是 HTML 内容，也可以是包含 HTML 内容的本地文件路径或 URL。margin: 页边距，可以为'10mm'、{top: '10mm', bottom: '20mm'}等格式。
详细的选项可以参考 wkhtmltopdf 官方文档。
以下是一个设置选项的示例：
-- -------------------- ---- -------
----- ------- - -
--------- -----
------- -
---- -------
----- -------
------- -------
------ ------
-
--
----------------------------------- --------
------------------------------------------常见问题及解决方案
1. 在 Windows 平台上执行 wkhtmltopdf 报错
在 Windows 平台上，有时会出现类似下面的错误提示：
Error: spawn wkhtmltopdf ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)这是因为没有正确设置环境变量的缘故。正确的做法是在系统环境变量的 PATH 中添加 wkhtmltopdf 的安装路径。例如，在我的 Windows 10 系统中，wkhtmltopdf 的安装路径为 C:\Program Files\wkhtmltopdf\bin，则需要将 C:\Program Files\wkhtmltopdf\bin 添加到系统环境变量的 PATH 提示。
如果还是无法解决问题，可以尝试在代码中直接指定 wkhtmltopdf 程序的路径。例如：
const wkhtmltopdfPath = path.join(__dirname, 'wkhtmltopdf.exe');
const options = { binPath: wkhtmltopdfPath };
wkhtmltopdf(source, options)
.pipe(destination);2. 中文乱码问题
在使用 wkhtmltopdf 生成 PDF 时，在默认情况下可能会出现中文乱码的问题。有两种解决方案：
- 明确指定 HTML 中文本的编码格式，例如：
<meta charset="utf-8">； - 指定输出 PDF 文件的编码格式，例如：
options.encoding = 'utf-8';。
3. @import 无法加载 CSS 文件问题
在 HTML 文件中使用 @import 导入 CSS 文件时，可能会出现 CSS 文件无法加载的问题。这是因为 wkhtmltopdf 只能加载 HTML 中直接引用的 CSS 文件，而不能解析引用页面嵌套的 CSS 文件。一个解决方案是将 CSS 文件都合并到一个文件中，然后在 HTML 文件中直接引用这个文件。
总结
本文介绍了如何通过 npm 包 wkhtmltox-montserrat 在前端项目中使用 wkhtmltopdf 工具，以及常见的问题解决方案。尽管使用这个工具有一些限制和需要注意的地方，但是它仍然是生成高质量 PDF 文档的一种强大工具，对于那些需要将网页内容转化为 PDF 文档的开发者来说，是非常实用的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710e8dd3466f61ffe1ec