wid_pdf /wkhtmltopdf忽略Twitter引导css

时间:2022-09-11 00:14:05

i am having trouble generating a pdf document in Ruby using wicked_pdf/wkhtmltopdf from the following sources:

我在使用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>

The generated PDF does ignore bootstraps css completely (meaning the whole layout of the document is scrambled). But it`s completely loaded into the "style" section.

生成的PDF完全忽略了引导css(这意味着文档的整个布局被打乱了)。但是它已经完全载入了“style”部分。

When I try to debug (generate.pdf?debug=1) the output html I do get correct formatting as i wanted it to be (#left is a column on the left of the page, #right is a column on the right).

当我尝试调试(generate.pdf?debug=1)输出html时,我确实得到了正确的格式(#left是页面左边的一列,#right是右边的一列)。

Is wkhtmltopdf capable of rendering twitter bootstrap css ?

wkhtmltopdf能够呈现twitter引导的css吗?

I`m using latest wicked_pdf gem with wkhtmltopdf 0.11.0 rc1.

我正在使用最新的wikhtmltopdf 0.11.0 rc1恶意pdf gem。

Thank you for any hint on this !

谢谢你的提示!

2 个解决方案

#1


4  

In your layout you must provide absolute paths in your CSS include tags OR use the provided helpers:

在你的布局中,你必须在你的CSS中提供绝对路径,包括标签或使用提供的助手:

wicked_pdf_stylesheet_link_tag 'application'

#2


0  

Nevermind !!

无所谓! !

Updating to the latest Bootstrap version 2.2.1 fixed it (had 2.1.1 prior). Dont ask me why but it must have been an issue in Bootstrap which i didn`t suspect.

更新到最新的Bootstrap版本2.2.1修复了它(之前有2.1.1版本)。不要问我为什么,但这肯定是我没有想到的一个问题。

#1


4  

In your layout you must provide absolute paths in your CSS include tags OR use the provided helpers:

在你的布局中,你必须在你的CSS中提供绝对路径,包括标签或使用提供的助手:

wicked_pdf_stylesheet_link_tag 'application'

#2


0  

Nevermind !!

无所谓! !

Updating to the latest Bootstrap version 2.2.1 fixed it (had 2.1.1 prior). Dont ask me why but it must have been an issue in Bootstrap which i didn`t suspect.

更新到最新的Bootstrap版本2.2.1修复了它(之前有2.1.1版本)。不要问我为什么,但这肯定是我没有想到的一个问题。