4

我正在使用wicked-pdfgem (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 not working，icons shown as squares

并将 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

4

2 回答 2

2

Wickedpdf 将 html 作为本地文件打开，因此所有 url 应该是相对于某个临时文件夹、完整的本地文件路径（这些是由 wicked pdf 助手生成的）或带有主机的绝对 url。

您fontawesome.css包含默认情况下不包含主机的字体文件的 URL。您可以为 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 不起作用）

于 2019-05-27T14:55:15.210 回答
2

由于对 webfonts 的相对路径引用， wicked_pdf_stylesheet_pack_tagandwicked_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，并且不能使用相对路径。

于 2020-03-25T18:57:13.060 回答