使用 Wicked_PDF 渲染为 PDF 时 ChartKick 图表不显示答案

【问题标题】：ChartKick charts do not show when rendering to PDF using Wicked_PDF使用 Wicked_PDF 渲染为 PDF 时 ChartKick 图表不显示
【发布时间】：2014-10-13 14:34:37
【问题描述】：

我正在使用 Rails 4、Wicked_PDF 和 Chartkick Gem 的
对于我使用的谷歌图表：

html 视图按预期提供了图表和所有内容。当我将 .pdf 附加到 url 时，pdf 文档会显示在浏览器中，但 ChartKick 图表不显示。
图表应该在的位置出现以下错误：

加载图表时出错：找不到适配器

我在 PDFKit 文档中在线找到了以下内容。

PDF 中不包含资源：图像、CSS 或 JavaScript 包含似乎没有在 PDF 中正确下载。这是由于事实上 wkhtmltopdf 不知道在哪里可以找到这些文件。制作确保您使用绝对路径（以正斜杠开头）到您的资源。如果您使用 PDFKit 从原始 HTML 生成 PDF 来源确保您使用完整的路径（文件路径或网址包括域）。在限制性服务器环境中，root_url 配置可能是你正在寻找的改变你的资产主机。

我假设 wkhtmltopdf 没有找到图表的链接，但我不确定如何解决这个问题。
有人有建议吗？

我找到了这个链接：
Render jQuery in wicked_pdf

Unixmonkey 帮助 FattRyan 为 Highcharts 解决这个问题。

谁能帮助如何设置此 wicked_pdf_javascript_include_tag 以便 Wicket_PDF 将使用 Google 图表接受来自 Chartkick 的图表？

【问题讨论】：

标签： ruby-on-rails pdf charts wicked-pdf chartkick

【解决方案1】：

在引用 pdf 布局内的 CDN 时，您必须指定协议 http 或 https。

chartkick 也是通过资产管道提供服务的，因此请改用 wicked_pdf_javascript_include_tag。

替换这一行：

<%= javascript_include_tag "//www.google.com/jsapi", "chartkik" %>

有了这个：

<%= javascript_include_tag "https://www.google.com/jsapi" %>
<%= wicked_pdf_javascript_include_tag "chartkick" %>

这就是我在我的一个项目中的做法。

干杯。

【讨论】：

非常感谢您在这方面的帮助。你的建议解决了我的问题。
其他人是否遇到过 PDF 上仅以 50% 宽度显示图形的问题？
为了调整宽度，我在库选项中指定了它。
直到我在 column_chart 调用上指定了固定宽度后，我的图表才显示

【解决方案2】：

我为此挣扎了一会儿，其他答案对我来说只是部分有用。我想为将来的任何人提供更多详细信息：

我为我们解决此问题所做的 4 项主要工作是：

(1) 不使用中间件方法，而是使用基于您创建的 PDF 布局的一次性 ruby 嵌入式 pdf

   #Example layout file
   #app/views/layout/pdf.pdf.rb

   <!DOCTYPE html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <%= wicked_pdf_stylesheet_link_tag "print" %> #print specific stylesheet
        <%= yield :head %>
      </head>
      <body>
        <h1>PDF Report</h1>
        <%= yield %>
      </body>
    </html>

(2) 使用 wicked_pdf 的资产助手仅在那些页面上为我们存储在应用程序中的资产加载我们需要的 javascript（所有基于 CDN 的资产都可以使用普通的 javascript_include_tag 加载）

#Example page template for a PDF you're downloading
#app/views/users/profile.pdf.erb

<% content_for :head do %>
  <%= javascript_include_tag "some_cdn.com" %>
  <%= wicked_pdf_javascript_include_tag "chartkick" %>
<% end %>

<p>All your pages content</p>

(3) 使用 javascript_delay 选项

#Use it universally from the initializer or on the specific PDF rendering in the controller
#config/initializers/wicked_pdf.rb
WickedPdf.config = {
  javascript_delay: 3000,
  other_options...
}

(4) 传递“离散”轴选项，否则我们只看到轴，没有时间图表（线/区域/等）的数据。

#In the above template, wherever you render your chart
#app/views/users/profile.pdf.erb

<% content_for :head do %>
  <%= javascript_include_tag "some_cdn.com" %>
  <%= wicked_pdf_javascript_include_tag "chartkick" %>
<% end %>

<%= area_chart @data_retriever.time_based_data, discrete: true %>
<%= pie_chart @data_retriever.other_data %> # the default is discrete: false so no need for another option

【讨论】：

你能说清楚点吗？你的意思是你不能在初始化程序中指定 WickedPdf 选项，只有控制器？更改设置时是否在本地重新启动服务器？初始化程序仅在应用程序初始化时加载。控制器中的配置将在页面重新加载时更新。
第四个选项是为我做的 - 非常感谢你！

【解决方案3】：

将以下内容添加到您尝试转换为 pdf 的视图顶部：

  <%= wicked_pdf_javascript_include_tag "application", "chartkick" %>

【讨论】：

我做到了，还必须在控制器处添加javascript_delay。这是因为我正在使用 Highcharts 并且它有一点动画......感谢您的帮助！

【解决方案4】：

通过安装最新的 wkhtmltopdf 版本，然后在步骤 (3) 中的控制器中指定 javascript_delay 选项，我得到了它与 Alex Villa 的答案以及类似 question 的答案一起使用：

respond_to do |format|
  format.html
  format.pdf do
    render pdf: "filename",
    javascript_delay: 3000,
    template: 'template_path.pdf.erb',
    layout: 'pdf.html'
  end
end

【讨论】：

【解决方案5】：

如果有人在 2019 年遇到相同的 Rails 4 问题，请尝试在 2.3.5 上冻结 chartkick 版本。因为从 3.0.0 版本开始，他们删除了对 Rails chartkick CHANGELOG

gem 'chartkick', '2.3.5'

在您的 pdf 视图文件的开头添加以下内容：

<%= javascript_include_tag "https://www.google.com/jsapi" %>
<%= wicked_pdf_javascript_include_tag "chartkick" %>

并将 wkhtmltopdf-binary gem 替换为 wkhtmltopdf-binary-edge。我用的是0.12.4.0版本。

gem 'wkhtmltopdf-binary-edge', '0.12.4.0'

这就是我所做的一切，它奏效了。

【讨论】：