Wicked PDF - показ потрясающих значков в виде квадратной рамки - PullRequest
Новая
       43

Wicked PDF - показ потрясающих значков в виде квадратной рамки

1 голос
/ 27 мая 2019

Я использую wicked-pdf gem (v1.2.2) для создания отчета в формате PDF, который содержит значок шрифта.

Я сохранил замечательный файл по этому пути:

vendor/assets/fonts/fontawesome.css.erb

и соответствующие шрифты в этом пути:

vendor/assets/fonts/fontawesome/fa-brands-400.eot

Пример фрагмента из fontawesome.css.erb : (так обозначаются шрифты)

<ч /> 
/*!
 * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url('<%= asset_path 'fontawesome/fa-brands-400.eot' %>');
  src: url('<%= asset_path 'fontawesome/fa-brands-400.eot' %>?#iefix') format("embedded-opentype"), url('<%= asset_path 'fontawesome/fa-brands-400.woff2' %>') format("woff2"), url('<%= asset_path 'fontawesome/fa-brands-400.woff' %>') format("woff"), url('<%= asset_path 'fontawesome/fa-brands-400.ttf' %>') format("truetype"), url('<%= asset_path 'fontawesome/fa-brands-400.svg#fontawesome' %>') format("svg"); }

Я использую ресурсный конвейер.

Я включил замечательный макет отчета (report.html.erb), как показано ниже: 

<%= stylesheet_link_tag wicked_pdf_asset_base64('fontawesome.css') %>

Когда я загружаю PDF в режиме отладки, я получаю квадратных прямоугольников и ничего не вижу в PDF. enter image description here

Я задавал этот вопрос: Шрифт Awesome не работает, значки отображаются в виде квадратов

и добавил ссылку CDN на fontawesome вместо локального файла. Работало только в режиме отладки .

Когда я пытался в режиме PDF, он занимал много времени и, наконец, не показывал шрифт. Следовательно, это не решение для меня.

Ждем ваших отзывов. Спасибо

Изменения: Я обновил fontawesome.css.erb с абсолютной ссылкой на файл шрифта: 
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url('<%= ActionController::Base.helpers.wicked_pdf_asset_path('fontawesome/fa-brands-400.woff') %>');
}

В режиме отладки я получаю следующую ошибку в браузере Chrome.

Not allowed to load local resource: file:///home/Projects/my_app/vendor/assets/fonts/fontawesome/fa-brands-400.woff

1 Ответ

1 голос
/ 27 мая 2019

Wickedpdf открывает html как локальный файл, поэтому все URL-адреса должны быть либо относительно какой-либо временной папки, либо с полными локальными путями к файлам (которые создаются злыми помощниками pdf), либо с абсолютными URL-адресами с хостами.

Ваш fontawesome.css содержит ссылки на файлы шрифтов, которые по умолчанию не содержат хост. Вы можете либо создать отдельную версию для генерации PDF, либо включить в HTML-шаблон head сам: 

<style>
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal; font-weight: normal;
  src: url('<%= wicked_pdf_asset_path 'fontawesome/fa-brands-400.woff' %>');
}
</style>

(нет необходимости в iefix и можно использовать меньше форматов, поскольку мы уверены, что wkhtmltopdf не является IE, также была ошибка с резервными URL-адресами для неработающих шрифтов)

...