Puppeteer npm как настроить шрифты из локального файла - PullRequest
Новая
       14

Puppeteer npm как настроить шрифты из локального файла

1 голос
/ 05 марта 2020

Я хотел бы загружать шрифты из локальных файлов при рендеринге PDF с помощью модуля узла кукловода.

Мне удалось использовать веб-шрифты , но это не удовлетворяет требованиям.

Моя среда:

  • Узел: v10.18.1 ,
  • Кукольник: "Кукольник": "^ 2.0.0",
  • Хром: Хром 79.0.3945.88 Проект Fedora,
  • ОС: CentOS Linux выпуск 8.0. 1905 (Core)

Вот код, который я пробовал до сих пор: загрузка шрифта с использованием @ font-face, изменение значений networkidle, настройка тайм-аута, настройка прослушивателей событий для обновления шрифта. Событие Я настроил этот обратный вызов для получения свойств шрифтов, которые возвращают «Open Sans», но отрендеренный PDF-файл не имеет шрифта Open Sans. 

const puppeteer = require('puppeteer');
const chromiumExecutablePath = '/bin/chromium-browser';

let document = `
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>

            @font-face {
                font-family: "Open Sans";
                font-style: normal;
                font-weight: 400;
                src: local("Open Sans") url("/opt/www/webapp/resources/packed/OpenSans-Regular.eot");
                src: local("Open Sans") url("/opt/www/webapp/resources/packed/OpenSans-Regular.woof") format("woff"),
                     local("Open Sans") url("/opt/www/webapp/resources/packed/OpenSans-Regular.ttf") format("truetype");
            }

            html, body {
              font-family: 'Open Sans', sans-serif;
            }

        </style>
        <sript>

        </script>
        <link rel="stylesheet" type="text/css" href="font.css">
      </head>
      <body>
        <div class="content">
          <h1 id="hello-world">Hello world long report</h1>
        </div>
      </body>
    </html>
    `
const browser = await puppeteer.launch({
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-web-security', '--font-render-hinting=none'],
    headless: true,
    executablePath: chromiumExecutablePath
});
const page = await browser.newPage()

const session = await page.target().createCDPSession();
await session.send('DOM.enable');
await session.send('CSS.enable');
await new Promise(resolve => setTimeout(resolve, 500));
session.on('CSS.fontsUpdated', event => {
  console.log(event);
  // event will be received when browser updates fonts on the page due to webfont loading.
});

await page.goto("data:text/html;charset=UTF-8,"+document, { waitUntil: 'networkidle0' }).catch(e => console.error(e));
await page.waitFor(2000);

await page.evaluateHandle('document.fonts.ready');

const selector = 'h1';
const getFontProperty = async (page) => {
  const font = await page.evaluate((selector) => {
    const title = document.querySelector(selector);
    return getComputedStyle(title).font;
  }, selector);
  return font;
}
console.log(await getFontProperty(page)); // output: 700 32px "Open Sans", sans-serif 

await page.emulateMedia("print");

await page.pdf({
    displayHeaderFooter: false,
    path: outputPath,
    width: 400+'px',
    height: 400+'px',
    printBackground: true,
    margin: {
        top: '20px',
        bottom: '40px'
    }
}); // output is valid PDF file but without Open Sans font

Есть идеи, как это можно решить? Существует аналогичный вопрос о том, как визуализировать изображения из локальных файлов, но я не могу решить из ответа, как это можно сделать со шрифтами.

...