Добавление шрифтов в Puppeteer PDF рендерер - PullRequest
Новая
       13

Добавление шрифтов в Puppeteer PDF рендерер

0 голосов
/ 26 июня 2018

Фон

Я использую Puppeteer в экспресс-приложении, которое выполняется в образе Docker.Нам необходимо работать в Docker из-за необходимых зависимостей, в которых нуждается Debian, к которым у нас нет доступа для установки.Использование Docker позволяет нам устанавливать то, что нам нужно.

Мы видели, как у многих людей возникают проблемы с правильным отображением их шрифтов в PDF-файлах, и в каждом случае, который я видел, установка шрифта так близко к этому - всегда ответ, 

 apt-get install -yq --allow-unauthenticated ttf-mscorefonts-installer

В этом случае они устанавливают определенные шрифты, для которых есть apt-get.Я видел, как другие устанавливали шрифты Puppeteer по умолчанию также с RUN apt-get install -yyq fonts-liberation.

Пример кода 

const browser = await puppeteer.launch({
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
      ignoreHTTPSErrors: true,
      dumpio: false,
    });
    const page = await browser.newPage();
    await page.goto(
      `http://localhost:3000/${template}?data=${JSON.stringify(req.body)}`,
    );
    const pdfBuffer = await page.pdf({
      format: 'A4',
      margin: {
        top: '20px',
        left: '20px',
        right: '20px',
        bottom: '20px',
      },
    });
    await browser.close();

Проблема

Нам нужно установить около 10 шрифтов, которые различные части приложения будут использовать в разных случаях.Для этого у нас есть файлы ttf и woff.Мы решили добавить их в систему так, как это делает apt-get с другими установленными нами шрифтами.Мы сделали это, добавив наши шрифты в каталог Debian,

/ usr / local / share / fonts

Мы видим, что шрифты правильно настроены в системе с помощьюrunning, 

fc-list

Когда мы добавляем подобные шрифты, они не отображаются.Вместо этого мы получаем странные символы, где эти шрифты должны быть.

Пример

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

RUN apt-get install -yyq fonts-liberation
COPY /fonts/*.ttf /usr/local/share/fonts/
COPY /fonts/*.woff /usr/local/share/fonts/

Вопрос

Так как у нас есть куча файлов шрифтов ttf и woff, которые необходимо визуализировать в PDF-файлах с помощью Puppeteer, как правильно добавить их в наш образ Debian, работающий в Docker, чтобы Puppeteer использовал ихкак и ожидалось?

1 Ответ

0 голосов
/ 19 августа 2018

Это пример скрипта, который идет и захватывает скриншот и PDF на сайте.В этом вопросе оба служат одной и той же цели, чтобы показать, что шрифты работают. 

(async()=>{
  const puppeteer = require('puppeteer')

  const browser = await puppeteer.launch({
    headless: true,
    args: ["--no-sandbox", "--disable-setuid-sandbox"]
  });
  const page = await browser.newPage()
  await page.goto('https://jp.quora.com/')
  await page.screenshot({path: `/shared/_${Date.now()}.png`})
  const pdfBuffer = await page.pdf({path: `/shared/_${Date.now()}.pdf`});

  await browser.close()
})()

Вот минимальный dockerfile, он очень минимальный, он не включает в себя ничего лишнего, например, dumb-init и различные хаки очистки, такие какздесь это не требуется. 

FROM node:8

# Install dependencies
RUN apt-get update && \
apt-get -yq install libatk1.0-0 libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 libasound2 xauth xvfb 

# Cd into /app
WORKDIR /app

# Copy package.json into app folder
COPY package.json /app

# Install dependencies
RUN npm install 

COPY . /app

# Start script on Xvfb
CMD ["xvfb-run","npm","start"]

После запуска вот как японский Кора показывает на кукловода, он показывает это так, потому что шрифты отсутствуют.

enter image description here.

Так как он основан на jessie, и мы можем установить шрифты, используя несколько разных команд.

Запустите стандартную команду apt-get

Ниже приведены некоторые шрифты с японскими символами вit. 

RUN apt-get -yq install xfonts-utils fonts-droid xfonts-intl-asian

Копирование шрифтов из каталога

Если у меня есть шрифты в каталоге fonts, то команда будет 

COPY fonts/*.* /usr/share/fonts/truetype/

Это действительно просто.Однако шрифты по-прежнему не будут работать, поскольку кэш шрифтов не обновляется достаточно быстро.Добавление следующего обеспечит обновление. 

RUN mkfontscale && mkfontdir && fc-cache

Вот и все!Давайте снова запустим скрипт.

enter image description here

...