Question

我正在使用Rails 4，Wicked_PDF和Chartkick Gem的对于Google Charts，我使用：

＆lt;％= javascript_include_tag “//www.google.com/jsapi”，“chartkik”％＆gt;

html视图会显示图表和所有内容。当我将.pdf附加到网址时，pdf文档会在浏览器中显示，但ChartKick图表不会显示。
图表应显示在以下错误：

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

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

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

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

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

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

任何人都可以帮助设置此wicked_pdf_javascript_include_tag，以便Wicket_PDF可以使用Google图表接受Chartkick的图表吗？

Answer 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" %>

我是如何在我的项目中做到的。

干杯。

Answer 2

我对此有点挣扎，其他答案对我来说只是部分有用。我希望将来为任何人提供更多细节：

我为我们解决的四个主要问题是：

（1）不使用中间件方法，而是使用一个基于您创建的PDF布局的ruby嵌入式pdfs

   #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）通过＆＃34;离散＆＃34;轴选项否则我们只看到轴而没有基于时间的图表的数据（行/区域等）

#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

Answer 3

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

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

Answer 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

Answer 5

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

gem 'chartkick', '2.3.5'

将此内容添加到pdf查看文件的开头：

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

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

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

这就是我所做的所有事情，并且有效。

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

5 个答案: