首页 文章

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

提问于
浏览
3

我正在使用Rails 4,Wicked_PDF和Chartkick Gem
对于Google Charts,我使用:

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

html视图提供了图表和所有预期的内容 . 当我将.pdf附加到网址时,pdf文档会在浏览器中显示,但ChartKick图表不会显示 .
图表应出现以下错误:

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

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

PDF中不包含资源:图像,CSS或JavaScript似乎未在PDF中正确下载 . 这是因为wkhtmltopdf不知道在哪里找到这些文件 . 确保使用绝对路径(以正斜杠开头)到您的资源 . 如果您使用PDFKit从原始HTML源生成PDF,请确保使用完整路径(文件路径或包括域的URL) . 在限制性服务器环境中,root_url配置可能是您正在寻找的更改资产主机的配置 .

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

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

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

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

4 回答

  • 0

    我对此苦苦挣扎,其他答案对我来说只是部分有用 . 我想为将来的任何人提供更多细节:

    我为我们解决这个问题的四个主要方面是:

    (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
    
  • 4

    在引用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" %>
    

    这就是我在我的一个项目中的表现 .

    干杯 .

  • 3

    通过安装最新的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
    
  • 1

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

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

相关问题