有什么方法可以选择性地将边距应用于使用 puppeteer 生成的 PDF？答案

【问题标题】：Any way to selectively apply margins to PDF generated with puppeteer?有什么方法可以选择性地将边距应用于使用 puppeteer 生成的 PDF？
【发布时间】：2018-04-30 08:50:07
【问题描述】：

我正在编写一个节点程序，该程序将从目标网页动态生成 PDF 并将其流式传输回浏览器。我正在使用 puppeteer 生成 PDF，我正在设计的网页是产品目录。

对于这个目录，我希望第一页是没有边距的全宽图形，但对于 PDF 的其余部分（这是一个大表格），我想为文档应用边距。

我的代码如下所示：

let viewportOptions = {
  width: 1680,
  height: 948,
  isLandscape: eval(req.params.orientation === "landscape")
};

let pdfOptions = {
  path: "",
  format: "letter",
  scale: 1,
  landscape: eval(req.params.orientation === "landscape"),
  printBackground: true,
  deviceScaleFactor: 2
  margin: { top: "1cm", bottom: "1cm", left: "1cm", right: "1cm" }
};

(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.setViewport(viewportOptions);
  await page.goto(`${fileData}`, { waitUntil: "networkidle2" });
  page.emulateMedia(null);
  const PDFresult = await page.pdf(pdfOptions);
  res.contentType("application/pdf");
  res.send(PDFresult);
  await browser.close();
})();

我可以对整个文档应用边距没问题，但是有没有一种很好的编程方法可以只将边距应用到第一页之后的页面？我看不到在 puppeteer API 中执行此操作的方法，但必须有另一种方法来完成此操作。

感谢您的宝贵时间！

【问题讨论】：

标签： css node.js pdf puppeteer

【解决方案1】：

page.pdf(option) === ctrl+p 所以如果你想设置高度和宽度，你应该设置页面高度和宽度以获得最终结果；试试这个代码：

 await page1.setViewport({
    width: 1920, height: 1080, fitWindow: false, deviceScaleFactor: 1, mobile: false, waitLoad: true,
    waitNetworkIdle: true
});
await common.launch(page1);

【讨论】：