web-dev-qa-db-ja.com

邪悪なPDF無視bootstrapグリッドシステム

私のテンプレートx.pdf.erbサイトで、すべてのスタイルシートとJavaScriptタグをリンクしました。

           <%= wicked_pdf_stylesheet_link_tag "bootstrap.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "style.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "styleUmowa.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "animate.css" -%>
            <%= wicked_pdf_javascript_include_tag "application" %>

Pdfサイトが生成されると、bootstrapグリッドシステムを除くすべてが良好です。つまり、邪悪なpdfは次のものを無視します。

<div class="container">
   <div class="row">
       <div class="col-lg-4"></div>
       <div class="col-lg-4"></div>
       <div class="col-lg-4"></div>
   </div>
</div>

つまり、bootstrap gridのない通常のdivのように表示されます。これを手伝ってくれませんか？

htmlruby-on-railsrubytwitter-bootstrappdf
35
Kacper Trafiał

私は同じ問題に遭遇しました。いくつかの解決策があります：

  1. アップグレードwkhtmltopdfバイナリからバージョン> = 0.12に、次に:viewport_sizeオプションを追加して、次のようにレンダリングします。
respond_to do |format|
  format.html
  format.pdf do
    render pdf: "my_pdf",
           viewport_size: '1280x1024'
  end
end
  1. または、col-xs-*クラスを使用することもできます
  2. または、次の内容でpdf.css.scss（bootstrap-sassを使用しています）を作成します。
@import "bootstrap/variables";
@import "bootstrap/mixins";

@include make-grid(sm);
@include make-grid(md);
@include make-grid(lg);

<%= wicked_pdf_stylesheet_link_tag "pdf.css" -%>に含めることを忘れないでください

プレーンなcssの場合、.col-sm-*ラッパーなしで、bootstrap.cssから.col-md-*、.col-lg-*、@mediaのすべてのルールをpdf.cssにコピーして貼り付ける必要があります。これは重要です。

62
glyuck

KnpLabs/snappy を使用している場合は、ビューポートをオプションとして指定すると状況が修正されます。

$snappy->setOption('viewport-size','1280x1024');
5
crx4

上記のソリューションは、Bootstrap 4の時点では機能しません。Bootstrap 4のグリッドシステムは、wicked_pdfでサポートされていないflexboxを使用して構築されています。 、wkhtmltopdfに依存しているため。

Bootstrap 4を使用しているときに単純なグリッドを機能させるには、width w-*コマンドを使用して独自のグリッドを定義し、d-*コマンドを表示して、 display: flex設定を無効にします。

例：

<div class="container">
   <div class="row d-table-row">
       <div class="col w-25 d-table-cell"></div>
       <div class="col w-25 d-table-cell"></div>
       <div class="col w-25 d-table-cell"></div>
       <div class="col w-25 d-table-cell"></div>
   </div>
</div>

注：デフォルトでは、25、50、75、100％の幅のみがサポートされています。独自の追加の幅定義をブートストラップの$sizes変数に追加することにより、次のようなものをscssスタイルシートに追加して、柔軟性を高めることができます。

// _custom.scss

@import "bootstrap/functions";
@import "bootstrap/variables";
$sizes: map-merge((20: 20%, 33: 33.33%, 40: 40%, 60: 60%, 67: 66.67%, 80: 80%), $sizes);
@import "bootstrap";

// Your CSS

幅と表示クラスの使用：

https://getbootstrap.com/docs/4.0/utilities/display/

https://getbootstrap.com/docs/4.0/utilities/sizing/

ブートストラップ4 flexbox grid and wkhtmltopdf：

wicked_pdfでflexboxgridを使用するには？

2
Excalibaard