Question

我正在尝试使用pdf中包含的Font Awesome图标转换现有的html文档。我使用wicked_pdf执行此任务。但显然正在创建一个非常艰巨的任务。所有Font Awesome图标都替换为空格。我需要一些建议来使事情有效。

我的配置：

wicked_pdf（1.1.0）
wkhtmltopdf-binary-edge（0.12.4.0）

生成的html如下所示：

<p>
  <i class="fa fa-phone"></i> &nbsp; +49 123 4567890
</p>

用于创建pdf的控制器操作：

def create_pdf
  @presenter = PortfolioPDFPresenter.new(@portfolio, self)
  html = render_to_string(template: 'portfolios/pdf_templates/portfolio',
                          layout: 'pdf_layout')
  footer_html = render_to_string(template: 'portfolios/pdf_templates/footer',
                                 layout: 'pdf_layout')
  title = ActionView::Base.full_sanitizer.sanitize(@portfolio.heading.html_safe, tags: [])

  pdf = WickedPdf.new.pdf_from_string(html,
                                      title:              title,
                                      author:             current_user.fullname,
                                      page_size:          'A4',
                                      margin:             { top: 20, bottom: 40 },
                                      print_media_type:   true,
                                      dpi:                600,
                                      zoom:               1,
                                      no_pdf_compression: false,
                                      lowquality:         false,
                                      outline:            { outline: true, outline_depth: 4 },
                                      footer:             { content: footer_html },
                                      extra:              '--encoding UTF8 --disable-smart-shrinking')

  send_data(pdf,
            filename: "#{t('activerecord.models.portfolio.one')}-#{current_user.fullname}.pdf",
            disposition: 'attachment',
            type: :pdf)
end # create_pdf

最后布局：

!!!
%html{lang: "#{I18n.locale.to_s}"}
  %head
    %meta{ content: 'text/html; charset=UTF-8', 'http-equiv': 'Content-Type' }
    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, shrink-to-fit=no' }
    %meta{ 'http-equiv': 'Accept-CH', content: 'DPR, Viewport-Width, Width' }
    %title
      = t('app_title')
    = csrf_meta_tags
    = stylesheet_link_tag    'https://fonts.googleapis.com/css?family=Exo+2:400,700'
    = stylesheet_link_tag    wicked_pdf_asset_base64("pdf_styles"), media: 'print'
    = stylesheet_link_tag    wicked_pdf_asset_base64("pdf_styles")
    = stylesheet_link_tag    'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'

  %body
    #main-content
      = yield

Answer 1

我自己也面临类似的问题。首先，我没有得到任何图标，然后，我开始得到一个奇怪的W-on-M的图标。

没有任何图标

一旦我将Font awesome的绝对CDN路径添加到我的pdf布局文件中就解决了。 https://github.com/brunzino/wpdf-icon-debug/pull/1/files?diff=split

得到一个奇怪的 W-on-top-of-M 图标

这不是服务器上的问题（Ubuntu 16.04）。如图所示，生产网站上的图标显示正确。但是在我的Mac上，所有图标都被这个奇怪的图标所取代。从来没有真正解决它，但通过在Mac上安装ttf字体来解决这个问题。

希望这有帮助

wicked_pdf（使用wkhtmltopdf）不会渲染Font Awesome图标

1 个答案:

没有任何图标

得到一个奇怪的 W-on-top-of-M 图标