Fatal编程技术网
  • ruby-on-rails/
  • Ruby on rails wicked_pdf/wkhtmltopdf忽略Twitter引导css

Ruby on rails wicked_pdf/wkhtmltopdf忽略Twitter引导css

ruby-on-rails twitter-bootstrap

Ruby on rails wicked_pdf/wkhtmltopdf忽略Twitter引导css,ruby-on-rails,twitter-bootstrap,wkhtmltopdf,wicked-pdf,Ruby On Rails,Twitter Bootstrap,Wkhtmltopdf,Wicked Pdf,使用wicked_pdf/wkhtmltopdf从以下来源生成Ruby中的pdf文档时遇到问题： respond_to do |format| format.js format.pdf { render :pdf => pdf_filename(@invoice,false), :template => "invoices/generate", :layout => "document", :show_as_htm

使用wicked_pdf/wkhtmltopdf从以下来源生成Ruby中的pdf文档时遇到问题：

respond_to do |format|
  format.js
  format.pdf {
    render :pdf => pdf_filename(@invoice,false),
        :template => "invoices/generate",
        :layout => "document",
        :show_as_html => params[:debug]
  }
end

  <style type='text/css'>/*!
  * Bootstrap v2.1.1
  ...
  */
    .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
    .clearfix:after{clear:both;}
   /*.... and so on twitter bootstrap css is definitely included here ..... */
  </style>
</head>
<body>
<div class="container">

  <div class="row">
   <div id="left" class="span6">
     <!-- any text here -->
   </div>
   <div id="right" class="span6">
     <!-- any other text here -->
   </div>
  </div>
</div>
</body>
</html>
-- 

  <style type='text/css'>/*!
  * Bootstrap v2.1.1
  ...
  */
    .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
    .clearfix:after{clear:both;}
   /*.... and so on twitter bootstrap css is definitely included here ..... */
  </style>
</head>
<body>
<div class="container">

  <div class="row">
   <div id="left" class="span6">
     <!-- any text here -->
   </div>
   <div id="right" class="span6">
     <!-- any other text here -->
   </div>
  </div>
</div>
</body>
</html>

/*！
*引导v2.1.1
...
*/
.clearfix{*zoom:1；}.clearfix:before.clearfix:before{display:table；content:”；行高：0；}
.clearfix:在{clear:两者；}之后
/*.... 因此，twitter上的引导css肯定包含在这里*/
生成的PDF完全忽略了引导css（这意味着文档的整个布局都被打乱了）。但它完全被载入了“风格”部分

  <style type='text/css'>/*!
  * Bootstrap v2.1.1
  ...
  */
    .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
    .clearfix:after{clear:both;}
   /*.... and so on twitter bootstrap css is definitely included here ..... */
  </style>
</head>
<body>
<div class="container">

  <div class="row">
   <div id="left" class="span6">
     <!-- any text here -->
   </div>
   <div id="right" class="span6">
     <!-- any other text here -->
   </div>
  </div>
</div>
</body>
</html>
当我尝试调试（generate.pdf？debug=1）输出html时，我确实得到了我想要的正确格式（左边是页面左边的一列，#右边是右边的一列）

  <style type='text/css'>/*!
  * Bootstrap v2.1.1
  ...
  */
    .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
    .clearfix:after{clear:both;}
   /*.... and so on twitter bootstrap css is definitely included here ..... */
  </style>
</head>
<body>
<div class="container">

  <div class="row">
   <div id="left" class="span6">
     <!-- any text here -->
   </div>
   <div id="right" class="span6">
     <!-- any other text here -->
   </div>
  </div>
</div>
</body>
</html>
wkhtmltopdf是否能够呈现twitter引导css

  <style type='text/css'>/*!
  * Bootstrap v2.1.1
  ...
  */
    .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
    .clearfix:after{clear:both;}
   /*.... and so on twitter bootstrap css is definitely included here ..... */
  </style>
</head>
<body>
<div class="container">

  <div class="row">
   <div id="left" class="span6">
     <!-- any text here -->
   </div>
   <div id="right" class="span6">
     <!-- any other text here -->
   </div>
  </div>
</div>
</body>
</html>
我正在使用最新的wicked_pdf gem和wkhtmltopdf 0.11.0 rc1

  <style type='text/css'>/*!
  * Bootstrap v2.1.1
  ...
  */
    .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
    .clearfix:after{clear:both;}
   /*.... and so on twitter bootstrap css is definitely included here ..... */
  </style>
</head>
<body>
<div class="container">

  <div class="row">
   <div id="left" class="span6">
     <!-- any text here -->
   </div>
   <div id="right" class="span6">
     <!-- any other text here -->
   </div>
  </div>
</div>
</body>
</html>
谢谢你的任何提示

在布局中，您必须在CSS包含标记中提供绝对路径或使用提供的帮助程序：

  <style type='text/css'>/*!
  * Bootstrap v2.1.1
  ...
  */
    .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
    .clearfix:after{clear:both;}
   /*.... and so on twitter bootstrap css is definitely included here ..... */
  </style>
</head>
<body>
<div class="container">

  <div class="row">
   <div id="left" class="span6">
     <!-- any text here -->
   </div>
   <div id="right" class="span6">
     <!-- any other text here -->
   </div>
  </div>
</div>
</body>
</html>

wicked_pdf_stylesheet_link_tag 'application'
别客气

  <style type='text/css'>/*!
  * Bootstrap v2.1.1
  ...
  */
    .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
    .clearfix:after{clear:both;}
   /*.... and so on twitter bootstrap css is definitely included here ..... */
  </style>
</head>
<body>
<div class="container">

  <div class="row">
   <div id="left" class="span6">
     <!-- any text here -->
   </div>
   <div id="right" class="span6">
     <!-- any other text here -->
   </div>
  </div>
</div>
</body>
</html>
更新到最新的引导版本2.2.1修复了它（之前的版本是2.1.1）。不要问我为什么，但这一定是引导中的一个问题，我没有怀疑。

仅对wkhtmltopdf进行了进一步的研究，发现如果引导的样式被内联编码到节中的标记中，wkhtmltopdf就会忽略它。如果使用标记链接它s，它将工作。然而，如果我把一些简单的样式直接放进标签中，它们就可以工作了，但是引导css不行！有一个很好的答案嗨，thx，我使用了helper wicked_pdf_stylesheet_link_标记，它将引导css作为内联css复制到源文档中。但是wkhtmltopdf忽略了此内联样式：-/请检查您的wkhtmltopdf版本。我对apt存储库和自制软件（在OSX上）中的内容有问题。。。我只是编译了它，这样我就可以得到最新的版本。我正在进行win（开发），使用预构建的二进制文件。除了这个问题没有其他问题。然而，据我所知，这似乎是一个格式错误（见下文）。无论如何，谢谢你！似乎与格式有关。尝试使用在引导网页上生成的自定义版本。使用缩小版和非缩小版-没有机会让它工作。然后下载源代码并用更少的资源编译它-->就像一个符咒。奇怪。 
  <style type='text/css'>/*!
  * Bootstrap v2.1.1
  ...
  */
    .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
    .clearfix:after{clear:both;}
   /*.... and so on twitter bootstrap css is definitely included here ..... */
  </style>
</head>
<body>
<div class="container">

  <div class="row">
   <div id="left" class="span6">
     <!-- any text here -->
   </div>
   <div id="right" class="span6">
     <!-- any other text here -->
   </div>
  </div>
</div>
</body>
</html>