Puppeteer 的坑

2024-01-07 18:01:04

当打开游览器 ctrl + P 和用 puppeteer generate PDF 时，需要知道有个固定的 HTML 结构

当使用 1rem 时，会依赖 html 的 font-size, 可是 HeaderTemplate and FooterTemplate 没有 html， header，body tag……
（第一个坑）没办法给 html tag, 而是要用 style home font-size

html {
  font-size: 14px;
}

HeaderTemplate & FooterTemplate 都依赖同一个 style html font-size, 那么只需要写在 HeaderTemplate 就好。

A4 width 有人说 8.3inch, 也有人说 8.26inch
而我测量后，发现 A4 width = 8.26 inch, 1 inch = 96px

我们都知道 HeaderTemplate and FooterTemplate 会放大，而具体是多少，每个人说的都不一样
而我测量后，最终是放大了 4/3 = 1.3333 倍

既然会放大，那么直接给 HeaderTemplate & FooterTemplate 一个固定的宽和 scale 75%，
（第二个坑）为什么 width 一定要给 8.26inch, 而不是给 width: 100%，为什么不能？可能是渲染循序吧，这里我不了解~

HeaderTemplate & FooterTemplate 有默认 style

  body {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  #header,
  #footer {
    display: flex;
    flex: none;
  }

看起来一切正常，可是如果用 display: flex ，会发现没有自动放大, 这里有鬼
（第三个坑）把 flex 换成 block 后，一切正常了

参考链接

码农公寓