图表未显示在 wicked pdf 中答案

【问题标题】：Charts not showing in wicked pdf图表未显示在 wicked pdf 中
【发布时间】：2020-05-21 06:06:01
【问题描述】：

在 Rails 中使用 wicked pdf 创建 pdf 文件时，不会呈现图表。我尝试了多个版本的 chart.js。没有任何效果。将 pdf 显示为 html 效果很好。此外，尝试在 chart.js 中设置 responsive: false 但效果不佳。

我在 head 标签中使用了以下内容：

 <%= wicked_pdf_javascript_include_tag "plugin_assets/rtcharts/javascripts/chart.min.js" %>
    <%= wicked_pdf_javascript_include_tag "plugin_assets/rtcharts/javascripts/chart.helper.js" %>
    <%= wicked_pdf_stylesheet_link_tag "plugin_assets/rtcharts/stylesheets/rtdashboard.css" %>

以下是图表组件：

  <% charts = controlchart %>
  <div class="rtdashboard grid-container grid-cols-2">
    <% if charts.empty? %>
    <p class="nodata"><%= l(:label_no_data) %></p>
    <% else %>
        <% charts.each do |graph| %>
      <div>
        <%=  render partial: 'rtcharts/bar',
                      formats: [:html],
                      :javascript_delay => 10000,
                      locals: graph %>

       </div>
        <% end %>
      <% end %>
    </div>

这是在我的控制器中：

格式.pdf {

    render template: 'qmcontrols/show',:type => 'application/pdf', pdf: "#{@project.identifier}_qmcontrol_#{@qmcontrol.id}",
    margin: {left: 15, right:  15 },
    :footer => {:center => "#{@project.name} / #{@location_details[0]['location_company']} / #{@qmcontrol.checkitem_location}", :right => '[page] / [topage]' },:javascript_delay => 5000,show_as_html: true
      }

【问题讨论】：

没有 PDF 的图表也能工作吗？
是的，当我将 pdf 显示为 html 时，它们工作正常。
很多 HTML/JS 图表库在wkhtmltopdf 上存在问题，因为它使用的是非常旧的 webkit 版本。此处有一些详细信息：github.com/mileszs/wicked_pdf/issues/910 或搜索您的图表库的问题。
您好，我无法解决该问题。我应该使用其他库来显示 pdf 文件还是在使用 wicked pdf 时更改我的图形库？
我建议先将图表转换为图像，然后将其嵌入到您的 PDF 中。请参阅quickchart.io 将 chart.js 转换为 image/pdf。

标签： javascript ruby-on-rails charts chart.js wicked-pdf

【解决方案1】：

最后，我首先将图表转换为图像，然后将其嵌入到我的 PDF 中。感谢@ty

使用 quickchart.io Ref. Convert Chart.js data to image 可以看到以下 url 将 chart.js 转换为图片

【讨论】：