Vue CLI 2 与 wkhtmltopdf 结合使用指南

2023-12-24 12:51:26

安装 wkhtmltopdf

brew install wkhtmltopdf

使用 wkhtmltopdf 生成 PDF

wkhtmltopdf http://localhost:8080/ output.pdf

解决 wkhtmltopdf 常见问题

CSS 支持不佳

wkhtmltopdf 对 CSS3 的支持不佳，这可能会导致生成 PDF 时出现样式问题。为了解决这个问题，可以使用以下方法：

使用较早版本的 CSS，如 CSS2。
使用外部样式表，而不是内联样式。
避免使用复杂的 CSS 样式。
使用一些 CSS 预处理器，如 Sass 或 Less，并将其编译成 CSS2 代码。

字体问题

wkhtmltopdf 可能无法正确渲染某些字体。为了解决这个问题，可以使用以下方法：

安装缺少的字体。
将字体转换为 PDF 支持的格式，如 TTF 或 OTF。
使用 @font-face 规则将字体嵌入到 PDF 文档中。

图像问题

wkhtmltopdf 可能无法正确渲染某些图像。为了解决这个问题，可以使用以下方法：

确保图像分辨率足够高。
将图像转换为 PDF 支持的格式，如 JPG 或 PNG。
使用 CSS 样式调整图像大小和位置。

使用 puppeteer 生成 PDF

puppeteer 是一个 Node.js 库，可以用来控制 Chrome 浏览器。它可以用来生成 PDF 文档，并支持更好的 CSS3 支持。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:8080');
  const pdf = await page.pdf();

  await browser.close();

  fs.writeFileSync('output.pdf', pdf);
})();

puppeteer 与 wkhtmltopdf 的对比

特性	wkhtmltopdf	puppeteer
CSS 支持	不佳	较好
字体支持	不佳	较好
图像支持	不佳	较好
安装	较简单	较复杂
使用	较简单	较复杂
速度	较快	较慢
内存使用	较低	较高