Wicked PDF - 将精美的图标显示为方形框

Question

我正在使用

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

---

Answer 1

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 的错误）

Answer 2

由于对网络字体的相对路径引用，

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 并且无法使用相对路径。

Answer 3

另一种解决方案是对字体文件进行 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)