我正在使用
wicked-pdf
gem (v1.2.2) 生成 PDF 报告,其中包含很棒的字体图标。
我已将 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"); }
我正在使用资产管道。
我已将 fontawesome 添加到报告布局中 (
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
Wickedpdf 将 html 作为本地文件打开,因此所有 url 都应该相对于某个临时文件夹、完整的本地文件路径(这些由 wicked 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 的错误)
由于对网络字体的相对路径引用,
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 并且无法使用相对路径。
另一种解决方案是对字体文件进行 Base64 编码。
这是在 Rails 6 中。在您的 PDF 布局文件中:
<%= stylesheet_link_tag wicked_pdf_asset_base64("bootstrap-icons.css") %>
在
app/assets/stylesheets
添加 bootstrap-icons.css
文件但替换
src: url("./fonts/bootstrap-icons.woff2?7141511ac37f13e1a387fb9fc6646256") format("woff2"),
url("./fonts/bootstrap-icons.woff?7141511ac37f13e1a387fb9fc6646256") format("woff");
类似以下内容:
@font-face {
font-display: block;
font-family: "bootstrap-icons";
src: url(data:font/woff2;charset=utf-8;base64,d09Q46rC8....) format("woff2"),
url(data:font/woff;charset=utf-8;base64,d09GRgABAA....) format("woff");
}
确保
base64,
之后没有空格。还要确保您的 Base64 编码字符串全部在一行上,没有空格。
要获取 Base64 编码的字符串,您可以在 Rails 控制台中执行以下操作:
encoded_string = Base64.encode64(File.read("/path/to/file/bootstrap-icons.woff"))
File.write("/path/to/file/encoded.txt", encoded_string)
encoded_string2 = Base64.encode64(File.read("/path/to/file/bootstrap-icons.woff2"))
File.write("/path/to/file/encoded2.txt", encoded_string2)