使用 Playwright 制作 PDF 时控制边距

Question

从无头 chrome Playwright 会话（下面的代码）制作 PDF 时，我会在左侧获得 PDF，而如果我通过在 chrome 中保存为 pdf 来制作 PDF，则会获得第二个输出。

我已经明确设置了边距并使用了preferCSSPageSize: true，两者都给出了相同的（左）结果。

如何让 Playwright 从打印对话框中为我提供与 chrome 相同的输出？

files being printed is here 的示例。 （在现实生活中，考虑到书脊宽度，它们都略有不同。）

const fs = require("fs");
const path = require("path");
const { chromium } = require("playwright");

const directoryPath = "outside";

(async () => {
  const filesToPrint = getFilesToPrintList(directoryPath);
  filesToPrint.forEach((f, i) => console.log(i, f));
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext();

  for (let i = 0; i < filesToPrint.length; i++) {
    const htmlFilename = path.join(directoryPath, filesToPrint[i]);
    const pdfFilename = makePDFfilename(htmlFilename);
    console.log("[html file]", htmlFilename);
    console.log("[pdf file]", pdfFilename);
    const page = await context.newPage();
    await page.goto(
      "file:///" + path.resolve(htmlFilename),
      (waitUntil = "networkidle")
    );
    const options = {
      path: pdfFilename,
      pageRanges: "1",
      preferCSSPageSize: true,
    };
    console.log(
      `\n\nAbout to print:\n  ${pdfFilename}\n`,
      `with:\n${JSON.stringify(options, null, 2)}`
    );
    await page.pdf(options);
  }
  await browser.close();
  console.log("done");
})();

function makePDFfilename(htmlFilename) {
  const parts = htmlFilename.split(/[\\\._]/);
  const pdfFilename = path.join(
    directoryPath,
    `Experimental_${parts[1]}_${parts[2]}.pdf`
  );
  return pdfFilename;
}

function getFilesToPrintList(directoryPath) {
  let theFiles = fs
    .readdirSync(directoryPath)
    .filter((f) => f.includes("fp_") && f.includes(".html"));
  return theFiles;
}

Answer 1

我试图重现您的问题：

我在您的 HTML 页面中使用了不同的背景图片 URL（在线），请参阅 test.html gist。

显然，许多选项是默认值。见page.pdf()。

另外，添加了browser.newContext() 和browser.close()。

这是最小的工作 NodeJS 代码：

生成-pdf.js

const { chromium } = require("playwright");

(async () => {
    const htmlFilename = "file:///<file-path>/test.html";
    console.log("[webpage]", htmlFilename);

    const browser = await chromium.launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto(htmlFilename);

    const pdfFilename = "./test.pdf";
    console.log("[pdf file]", pdfFilename);

    const options = {
      path: pdfFilename,
      pageRanges: "1",
      preferCSSPageSize: true
    };

    console.log(
      `\n\nAbout to print:\n  ${pdfFilename}\n`,
      `with:\n${JSON.stringify(options, null, 2)}`
    );

    await page.pdf(options);
    await browser.close();

    console.log("done");
})();

控制台输出：

$ node generate-pdf.js
[webpage] file:///<file-path>/test.html
[pdf file] ./test.pdf


About to print:
  ./test.pdf
 with:
{
  "path": "./test.pdf",
  "pageRanges": "1",
  "preferCSSPageSize": true
}
done

PDF 快照（test.pdf）：

您可能想单独测试一下，看看它是否适用于您的用例。