时间戳

首页 > 解决方案 > 循环数据时如何设置打印预览的页面

html - 循环数据时如何设置打印预览的页面

问题描述

这是我的打印预览页面，您可以看到数据循环到下一页。我应该怎么做，然后数据将在同一页面中循环？

在此处输入图像描述

比如下图就是我想做的布局，数据会在同一个页面循环，如果满了就开始循环到下一页

在此处输入图像描述

我的打印页面代码

<!DOCTYPE html>
<html>
<head>

<title>This is a print page!</title>
</head>
<style>

</style>
<body>
@foreach ($xyprintPreview as $item)
      <h1>{{ $item->xy_sx_ID}}</h1>
@endforeach
</body>
</html>

新更新的图片

在此处输入图像描述

新更新的编码

<body>
<table class="report-container" style="width: 100%">
<thead class="report-header">
  <tr>
     <th class="report-header-cell">
        <div class="header-info mt-3">
            <h4 style="text-align: center;">
              <img src="https://scontent.fmkz1-1.fna.fbcdn.net/v/t31.0-8/o.jpg?_nc_cat=111&ccb=2&_nc_sid=09cbfe&_nc_ohc=gLnsAI4ON1MAX98YpzP&_nc_ht=scontent.fmkz1-1.fna&oh=bacd1bd15cf7a118af57abe52bf7e07e&oe=5FFAAEC0" alt="Avatar" style="width:60px">
              柔佛古庙许愿灯登记名单‎({{$year}}年‎)‎
            </h4>
            <hr style="border: 1px solid;">
                 <b style="margin-left: 180px; font-size: 20px">善信编号&nbsp;&nbsp;名字</b> 
                 <b style="margin-left: 290px; font-size: 20px">善信编号&nbsp;&nbsp;名字</b>
                 <b style="margin-left: 290px; font-size: 20px">善信编号&nbsp;&nbsp;名字</b>   
        </div>
      </th>
   </tr>
 </thead>
 <tfoot class="report-footer">
   <tr>
      <td class="report-footer-cell">
        <div class="footer-info mb-3">
          
        </div>
       </td>
   </tr>
 </tfoot>
 <tbody class="report-content ">
    <tr>
      <td class="report-content-cell">
         <div class="main" style="column-count:3; margin-left: 180px;">
            @foreach($xyprintPreview as $item)
            <ul>
                <li>
                  <span style="font-size: 20px"><b>{{$item->xy_sx_ID}}</b>&nbsp;&nbsp;{{$item->xylight_label}}</span>
                </li>
            </ul>
            @endforeach
         </div> 
     </td>
    </tr>   
  </tbody>

第2页

在此处输入图像描述

标签： htmllaravelprint-preview

解决方案

css 属性column-count可以解决你的问题。附加到包含 h1 标签或 ul li 标签的 div 标签。

<div style="column-count: 3;">
</div>

它将这个 div 中的内容分成三列，具有相同的页面。你可以看到演示（jsfiddle）

您可以使用 ul, li 标签将项目符号样式删除为 none 以获得有序结果。你可以看到演示（jsfiddle）

推荐阅读