如何在DOMPDF中使用大型动态表格进行封面处理

时间:2015-10-07 10:34:50

标签: php html css codeigniter dompdf

I want to do something like this.

我的代码是这样的,我使用CodeIgniter和DOMPDF库,但在页面之间我有一个完整的空白页面(我不想要这个),我有一些像我的图像。

任何人都可以帮助我吗?非常感谢。

$language = $this->input->cookie('language');
if (!isset($language))
{
  $language = $core_settings->language;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta name="Author" content=""/> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <style type="text/css">
      @page {
        margin: 0;
      }
      .pages {
        margin: .5in;
      }
      .other-pages{
        padding:60px;
      }
      .first-page {
        margin: 0in;
        background-color: black;
        height: 100%;
        width: 100%;
        position:absolute;
        background-image: url('https://www.example.com/wp-content/uploads/2015/09/example-cover1.jpg'); 
        background-position: bottom center; 
        background-repeat: no-repeat; 
        background-size: 100%;

      }
     .first-page + * {
        page-break-before: always;
      }

    // CUSTOM STYLE //

    #page {
        background: #ffffff;
        width: 100%;
        margin: 0 auto;
        margin-top: 0px;
        display: block;
        z-index: 0;
      }

      .headline {
        color: #4d5357;
        font-weight: lighter;
        font-size: 48px;
        margin: 20px 0 0 0;
      }

      .terms {
        width: 400px;
        margin: 0 0 40px 0;
        font-size: 12px;
        color: #a1a7ac;
        line-height: 180%;
      }

      .terms strong {
        font-size: 16px;
      }

      .recipient-address {
        padding-top: 60px;
        width: 200px;
      }

      .company-logo {
        right: 40px;
        top: 40px;
        float:right;
        max-height:70px;
      }

      .company-address {
        width: 200px;
        color: #a1a7ac;
        position: absolute;
        right: 0px;
        top:70px;
        text-align: right;
      }

      .status {
        position: absolute;
        top: -50px;
        left: -50px;
        text-indent: -5000px;
        width: 128px;
        height: 128px;
      }

      .Open {
        background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-open.png);
      }

      .Sent {
        background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-sent.png);
      }

      .Paid {
        background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-paid.png);
      }

      .Overdue {
        background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-overdue.png);
      }

      hr {
        clear: both;
        border: none;
        background: none;
        border-bottom: 1px solid #d6dde2;
      }

      .total-due {
        float: right;
        width: 250px;
        border: 1px solid #d6dde2;
        margin: 20px 0 40px 0;
        padding: 0;
        border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
        text-align: right;
      }

      .total-heading {
        background: #e7ebee;
        color: #63676b;
        text-shadow: 0 1px 1px #ffffff;
        padding: 8px 20px 0 0;
        -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.08);
        border-bottom: 1px solid #d6dde2;
      }

      .total-heading p, .total-amount p {
        margin: 0; padding: 0;
      }

      .total-amount {
        padding: 8px 20px 8px 0;
        color: #4d5357;
        font-size: 24px;
        margin:0;
      }

      table.tablesorter {
        width: 100%;
        text-align: left;
        border:0;
        margin: 0px 0 0 0;
        color: #a1a7ac;        
      }

      table.tablesorter thead tr th, table.tablesorter tfoot tr th {
        margin: 0;
      }

      table.tablesorter thead tr.header {
        background: #e7ebee;
        color: #4d5357;
        text-shadow: 0 1px 1px #ffffff;
        padding-left: 20px;
        -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.08);
        border-bottom: 1px solid #d6dde2;
      }

      table.tablesorter thead tr.header th{
        font-size: 11px;
        height:30px;
        border-bottom: 1px solid #d8dcdf;
        text-align: left;
        padding-left:10px;
        }

      .round{
        border: 1px solid #d6dde2;
        border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;

      }
      table.tablesorter tbody td {
        padding: 10px;
        vertical-align: top;
        font-size: 11px;
      }

      table.tablesorter tbody tr.even td {
        background: #f6f8f9;
      }

      .custom-terms {
        padding:20px 10px;
      }

      .sum{
        width:50%;
        padding:5px 10px;
      }

      .margin{
        padding:5px 10px;
        height:20px;
      }
    </style>
  </head>
  <body>
    <div class="pages first-page"></div>
    <div class="other-pages">
        <h2>Lorem ipsum dolor...</h2>
        <div class="round"> 
        <table id="table" class="tablesorter" cellspacing="0" > 
            <thead> 
            <tr class="header"> 
              <th width="5%">#</th>
              <th width="95%">Tarea</th>
            </tr> 
            </thead> 
            <tbody> 
            <?php $i = 0; $sum = 0; $row=false; ?>
              <?php foreach ($tasks as $task):?>
                <tr <?php if($row){?>class="even"<?php } ?> >
                  <td><?php echo $i; ?></td>
                  <td><?php echo $task->name; ?><?php echo strip_tags($task->description); ?></td>
                </tr>               
              <?php $i++; endforeach;  $row = true; ?>
            </tbody> 
        </table> 
        </div> 
    </div>
  </body>
</html>

0 个答案:

没有答案