使用宝石 wicked_pdf ，我正在尝试实现通过插件 jQuery formBuilder 创建的表单的PDF版本。

但是，在生成PDF时，wicked_pdf无法识别formBuilder函数：$('#fillable-form').formRender(formRenderOpts); 它返回错误TypeError: 'undefined' is not a function（我使用this代码段通过控制台日志调试javascript）。

我尝试过debugging和.formRender()在纯HTML格式下效果很好：

是否有人知道为什么？.formRender() 不执行其PDF格式吗？

规格：

• wicked_pdf v1.4.0
• wkhtmltopdf v0.12.5
• formBuilder v2.1.2

控制器：

respond_to do |format|
  format.html { render "forms/_completed_form.html.erb" }
  format.js
  format.pdf do
    @pdf_type = 'Form'
    render pdf: "Form #{@completed_user_form.form.name}",page_size: 'Letter',template: "forms/partials/pdfs/completed_form_pdf.html.erb",layout: "pdf.html.haml",zoom: 1,dpi: 75,viewport_size: '1280x1024',javascript_delay: 10000,show_as_html: params.key?('debug')
  end
end

结束

pdf.html.haml ：

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8","http-equiv" => "Content-Type"}/
    %title= "#{@pdf_type} PDF"
    = stylesheet_link_tag 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.css'
    = wicked_pdf_stylesheet_link_tag 'profile-pdf'
    = javascript_include_tag "https://code.jquery.com/jquery-1.12.4.min.js"
    = javascript_include_tag 'https://cdn.jsdelivr.net/npm/formBuilder@2.1.2/dist/form-render.min.js'
  %body
    = yield

completed_form_pdf.html.erb：

<div class="container">
  <!-- Header -->
  <!-- Some extra code -->

  <%= render 'forms/partials/pdfs/completed_form_formbuilder_form_pdf',parent_form: @completed_user_form %>
</div>

_completed_form_formbuilder_form_pdf.html.erb：

<%= form_for(parent_form,url: review_user_form_path,method: 'post') do |f| %>
  <div class="row" style="margin-top:25px;">
    <div class="col-sm-6">
      <h5><%= parent_form.form.name %></h5>
    </div>
    <div class="col-sm-6">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div style="border: 1px black;border-style: dashed; height: 60%; overflow:hidden; overflow-y:auto; padding:20px;" id="fillable-form">
      </div>

      <div id="pdf-errors" style='width: 500px; min-height: 100px;'> </div>
    </div>
  </div>
<% end %>

<script>
  // Form Rendering
  setTimeout(function(){
    <% form_data = parent_form.form.data.delete!("\n") %>
    <% form_data = parent_form.form.data.delete!("\r") %>
    <% form_data = parent_form.form.data.delete!("\t") %>

    var formRenderOpts = {
      container: $('#fillable-form'),formData: JSON.stringify(<%= form_data.html_safe unless form_data.blank? %>),dataType: 'json'
    };

    console.log('Sample console.log')
    console.log("#fillable-form container length: "+ $('#fillable-form').length)

    $('#fillable-form').formRender(formRenderOpts); // TypeError OCCURS HERE
    console.log('end')
  },2000);

  setTimeout(function()
  {
    var $pdf = $("#pdf-errors");

    // This prints in the pdf,that means code works till here
    $pdf.append('<span> Testing Errors wrapper</span>');

    // This if block fails in pdf (I guess due to var args,not sure). 
    // So I tested this code,in both ways,// where this if block is present and where it is not.
    if ($pdf.size()) {
      ["log","warn","error"].forEach(function (type) {
        console[type]= function (a) {
          $pdf.append("<div> "+ type +": "+a+"</div>")
        }
      })
    }

    // This gets intialized if the above if bock is not present,but I don't see any 
    // errors,neither do I see my pdf working as expected.
    window.onerror = function (messageOrEvent,source,lineno,colno,error) {
      $pdf.append('<div class="critical">' + messageOrEvent + '</div>');
      return false;
    }

    // This block is just in case situation,thought the above handler might not be initialized in pdf
    // so used this handler,but this one is not working too...
    window.addEventListener('error',function (error) {
      $pdf.append('<div class="critical"> Anything related to error: '+error+' </div>');
    }); 
  },500);
</script>