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
Пример фрагмента из шрифтawesome.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"); }
I am using asset pipeline.
Я включил шрифт в макет отчета (report.html.erb), как показано ниже:
<%= stylesheet_link_tag wicked_pdf_asset_base64('fontawesome.css') %>
Когда я загружаю PDF в режиме отладки, я получаю только квадратные коробки и ничего не вижу в PDF.
Я сослался на этот вопрос: Шрифт Awesome не работает, значки отображаются в виде квадратов
и добавил ссылку CDN на fontawesome вместо локального файла. Работало только в режим отладки.
Когда я попробовал в режиме PDF, потребовалось много времени для загрузки, и, наконец, шрифт не отображался. Следовательно, это не решение для меня.
Ждем ваших отзывов. Спасибо
Изменения: I updated the
fontawesome.css.erb with absolute reference to font file:
@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
Ответы 2
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-адресами для шрифтов)
@dp7 для режима отладки это нормально, для более быстрой разметки удобно менять asset_path/wicked_pdf_asset_path в зависимости от режима рендеринга
Помощники 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-адрес, и он не будет работать с относительным путем.
Спасибо за ответ. Я изменил файл шрифта и теперь получаю ошибку
Not allowed to load local resource. Я добавил код к вопросу в разделе Изменения выше, пожалуйста, посмотрите.