Wicked PDF — отображение шрифтовых значков в виде квадратного поля

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

Я сохранил файл fontawesome по этому пути:

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-файле.введите здесь описание изображения

Я передал этот вопрос: Font 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


ruby-on-rails wicked-pdf wicked-gem
person dp7    schedule 27.05.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Ваш fontawesome.css содержит URL-адреса файлов шрифтов, которые по умолчанию не содержат host. Вы можете либо создать отдельную версию для генерации 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-адресами для шрифтов)

person Vasfed    schedule 27.05.2019
comment
Спасибо за ответ. Я изменил файл fontawesome и теперь получаю ошибку Not allowed to load local resource. Я добавил код к вопросу в разделе Изменения выше, пожалуйста, посмотрите. - person dp7; 28.05.2019
comment
@dp7 для режима отладки эта ошибка нормальна, для более быстрой разметки удобно менять asset_path/wicked_pdf_asset_path в зависимости от режима рендеринга - person Vasfed; 28.05.2019

arrow_upward
1
arrow_downward

Помощники wicked_pdf_stylesheet_pack_tag и wicked_pdf_stylesheet_link_tag, похоже, не очень хорошо работают с fontawesome из-за ссылки на относительный путь к веб-шрифтам.

У меня сработало следующее (используя webpacker)...

yarn add @fortawesome/fontawesome-free

В app/javascript/packs/reports.js (назовите пакет как хотите):

import '@fortawesome/fontawesome-free/scss/fontawesome.scss'
import '@fortawesome/fontawesome-free/scss/solid.scss'
// add other icons as necessary

И затем в вашем файле макета:

= stylesheet_link_tag asset_pack_url('reports.css')

Использование asset_pack_url вместо asset_pack_path важно, потому что wicked_pdf нужен полный URL-адрес, и он не будет работать с относительным путем.

person akaspick    schedule 25.03.2020