Question

我已将此发布到 Puppeteer GitHub issues 页面上，因为我认为这是创建 PDF 的方式的内部原因，但是，我没有回应，所以我希望这里有人之前遇到过这个问题.

问题

我们在渲染 PDF 时遇到文本换行的问题。 HTML 预览通过 Chrome 正常显示，page.screenshot 按预期呈现，但是，输出 PDF 将文本换行到新行。

我已经在 MacOS 上本地复制了这个，并包含了要运行的代码的 zip。

重现步骤

告诉我们您的环境：

Puppeteer 版本：5.4.1
平台/操作系统版本：MacOS Catalina (10.15.7) 和 node:12.13.0-stretch (Debian) 基于 Docker 的环境。
Node.js 版本：12.18.1 (MacOS)、12.13.0 (Linux)

哪些步骤会重现问题？

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
    args: [
      '--no-sandbox',
      '--disable-gpu',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage',
      '--homedir=/tmp',
      '--data-path=/tmp/data-path',
      '--disk-cache-size=0',
      '--disk-cache-dir=/tmp/cache-dir',
      '--font-render-hinting=none',
    ], // All mandatory
    ignoreHTTPSErrors: true,
  });
  const page = await browser.newPage();
  await page.goto('http://pptr-pdf-text-wrap.s3-website-us-east-1.amazonaws.com', {
    waitUntil: ['networkidle0', 'load'],
    timeout: 0
  });

  await page.waitForSelector('#page');
  await page.waitForTimeout(2000);

  const width = 1588;
  const height = 2246;

  await page.addStyleTag(
    {'content': `@page { size: ${width}px ${height}px; margin: 0; }`}
  )

  await page.setViewport({
    width: width,
    height: height,
  });
  await page.screenshot({
    path: 'text-wrap.png',
  });

  await page.pdf({
    path: 'text-wrap.pdf',
    printBackground: true,
    pageRanges: '1',
    width: width,
    height: height,
  });

  await browser.close();
})();

解压 pptr-pdf-text-wrap.zip
npm install
运行node index.js

预期结果是什么？

根据 PNG 和 HTML 预览，PDF 在一行中包含文本“在此处输入文本” text-wrap

会发生什么？

PDF 将文本“这里”换行。 text-wrap.pdf

Puppeteer PDF 正在包装文本

0 个答案: