PDF, созданный с кукловодом, не показывающим потрясающие шрифты иконки - PullRequest
Новая
       35

PDF, созданный с кукловодом, не показывающим потрясающие шрифты иконки

0 голосов
/ 22 февраля 2019

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

Однако значки со шрифтами не отображаются.У меня есть только два CSS-файла: framework.css (созданный с помощью SASS и содержащий пользовательские стили, стили начальной загрузки и потрясающий шрифт) и print-media (содержит печатные носители css для скрытия или отображения таких вещей, как навигация).Вот мой код для создания буфера PDF: 

const browser = await puppeteer.launch({
      args: ['--disable-dev-shm-usage', '--no-sandbox', '--headless', '--disable-gpu'],
      executablePath: pathToChrome}
);
const page = await browser.newPage();
const content = await page.setContent(pdfOptions.dom);
const addCss7 = await page.addStyleTag({path: appPath +  '/public/css/framework.css'});
const addCss8 = await page.addStyleTag({path: appPath +  '/public/css/print-media.css'});
const buffer = await page.pdf();
F.log(buffer);

Внутри папки css я создал папку fonts, содержащую шрифты font-awesome, а @ font-face ссылается на этот путь: 

@font-face {
  font-family: "FontAwesome";
  src: url("./fonts/fontawesome-webfont.eot?v=4.7.0");
  src: url("./fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("./fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("./fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("./fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("./fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

Должен ли я сказать кукольнику, что существуют шрифты, которые он должен использовать специально, или я пропустил что-то еще?

Заранее спасибо, Паскаль

Редактировать: пытался использовать абсолютный путь, ноэто тоже не сработает.Если я это сделаю, даже веб-сайт не будет содержать шрифты. 

@font-face {
    font-family: "FontAwesome";
    src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?v=4.7.0");
    src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff?v=4.7.0") format("woff"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
  }

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

Я решил эту проблему, скопировав определенные шрифты в папку шрифтов моей локальной файловой системы.В Mac OS мне пришлось скопировать все шрифты Font Awesome в ~/Library/Fonts.

0 голосов
/ 26 февраля 2019

Как я прокомментировал вопрос.Проблема в расположении about:blank.Я рекомендую сделать следующее:

  • Создать папку web.
  • Поместить туда свою папку шрифтов.
  • Создать там пустой файл .html.Как этот https://github.com/GoogleChrome/puppeteer/blob/master/test/assets/empty.html
  • После const page = await browser.newPage(); вызов await page.goto('file://your path/expressed/as/url/web/empty.html');
  • Теперь ваш относительный путь "./fonts/, должен работать
...