Question

如何避免在中间切掉我的qrcodes贴纸？我正在使用很棒的gem wicked pdf生成pdf 我试图添加分页后，但我不知道它是如何工作的。帮助将不胜感激

这是pdf的样式，位于vendor / assets / pdf.scss

.sticker {
    border: 1px dashed #111;
    padding: 10px;
    height: 260px;
    width: 170px;
}

table.qrcode {
  border-width: 0;
  border-style: none;
  border-color: #0000ff;
  border-collapse: collapse;
  margin-top: 12px;
  margin-bottom: 10px;

  td {
    border-width: 0;
    border-style: none;
    border-color: #0000ff;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    width: 4px;
    height: 4px;

    &.black {
      background-color: #000 !important
    }

    &.white {
      background-color: #fff !important
    }
  }
}

这是我的app / views / stickers / show.pdf.erb

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="content">
    <div id="stickers">
        <div class="row">
        <% @sticker.quantity.times do  %>
            <div class="col-xs-3">
                <div class="sticker">
                    <div class="row">
                        <div class="col-xs-12">
                            <%= render_qr_code_small("https://super-shop.herokuapp.com/admin/products/#{@sticker.product}") %>  
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <ul class="list list-unstyled">
                                <li><strong><%= number_to_currency_euro @sticker.product.price %></strong></li>
                                <li><%= @sticker.product.title %> - <%= @sticker.product.color %></li>
                                <li><%= @sticker.product.brand %></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        <% end %>
    </div>  
    </div>
</div>

Answer 1

有避免中断的CSS：

.nobreak {
  page-break-inside: avoid !important;
}

并将nobreak添加到不想拆分的div中

如何用PDF中的CSS来中断页面

1 个答案: