在带有背景的HTML表格中打印文本

Question

我正在尝试打印一个简单的证书。证书的文本被布置为html表。 我遇到了一些简单而又疯狂的问题。 1）当我尝试通过chrome打印时，我的css对表的更改被完全忽略。 2）我无法找到一种始终如一的打印方式，文本集中在适当的位置 3）我无法找到一种方法来转换整个表格并以纵向打印。

我的css看起来像这样：

 @media print {
        /* show cover in print */
        .cover {
            display: block;
        }
        .dvCertWrapper {

        }
        .cert {
            width: 1080px!important;
            content: url('../Content/images/certificate.jpg');
            margin-left: -210px;
            background-repeat: no-repeat;
            background-position: right top;
            background-attachment: fixed;
        }
        .certContent {
            display: block;
            margin-top: -680px;
            /*margin-left: 60px;*/
            width: 100%;
            text-align: center;

           }
        .startDate {
            display: block;
            font-family: "Century Schoolbook" !important;
            font-size: 20px;
            font-style: normal;
            margin-top: -170px;
            margin-left: -102px;
            position: absolute;
        }
        .endDate {
            display: block;
            font-family: "Century Schoolbook" !important;
            font-size: 20px;
            font-style: normal;
            margin-top: -10px;
            margin-right: -60px;
            position: absolute;
        }
        /* hide other elements in print */
        button {
            display: none;
        }

        .smallText {
            font-size: .8em;
            width: 800px;
        }
        table {
            border-collapse: collapse;
            width: 1800px;
        }
    }

My Table Def看起来像这样：

 <table  class="certContent" style="display: block">
        <tbody >
            <tr style="width: 800px !important">
                <td class="smallText">&nbsp;Valid From:&nbsp;{{vendor.dStartDate}}</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="smallText">Valid Till: {{vendor.dEndDate}}&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <th colspan="4">&nbsp;{{vendor.sBusinessnameLegal}}</th>
            </tr>
            <tr>
                <th colspan="2">{{vendor.iSic1}}</th>
                <th colspan="2">{{vendor.iSic2}}</th>
            </tr>
            <tr>
                <td colspan="2">{{vendor.iSic3}}</td>
                <td colspan="2">{{vendor.iSic4}}</td>
            </tr>
            <tr>
                <td colspan="4">&nbsp;</td>
            </tr>
        </tbody>
    </table>

没有骰子。在此之前我尝试过这样：

<style>
     html,
     body {
         height: 100%;
         margin: 0;
     }

    .cover {
        /* hidden cover */
        display: none;
        height: 100%;
        width: 100%;
    }
    /* fills entire sheet of paper */

    .cert {
        display: block;
        height: 974px;
        width: 1366px;
        background-image: url('../Content/images/certificate.jpg');
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: fixed;
    }
    /* only apply when printing */

    @media print {
        /* show cover in print */
        .cover {
            display: block;
        }
        .cert {
            width: 800px;
            content: url('../Content/images/certificate.jpg');
            margin-left: -160px;
            background-repeat: no-repeat;
            background-position: right top;
            background-attachment: fixed;
        }
        .certContent {
            display: block;
            font-family: "Century Schoolbook" !important;
            font-size: 40px;
            font-style: normal;
            margin-top: -800px;
            margin-left: 60px;
           }
        .leftDate {
            display: block;
            font-family: "Century Schoolbook" !important;
            font-size: 40px;
            font-style: normal;
            margin-top: -10px;
            margin-left: -60px;
        }
        /* hide other elements in print */
        button {
            display: none;
        }
    }
</style>

<button onclick="window.print()">print</button>
<div class="cover">COVERLETTER</div>
<div>
    <div class="cert"></div>
    <div class="certContent">My Business</div>
    <div class="leftDate">01/01/1979</div>
</div>

仍然没有关闭。

我的背景图片尺寸为834 x 595像素，我正在尝试在法律文件中打印。

我完成的图像应如下所示。 （我为这张图片道歉，我不是设计师，只是参加了一个慈善项目。）

红色框描述了我希望如何显示服务器数据。 任何想法或指示将非常感激。感谢...

Answer 1

由于用户的系统设置比打印页面更多地处理打印，因此有时需要在打印对话框中手动设置纸张方向和尺寸。
我让这个例子适合一张法律文件 我还将表格中的布局更改为一系列行，这些行的高度可以更改。

body {
  height: 100%;
  width: 100%;
  margin: 0;
}
button {
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 20px;
}
.cover {
  display: none;
  height: 8.5in;
  width: 14in;
}
.cert {
  display: block;
  height: 8.5in;
  width: 14in;
  max-width: 14in;
  max-height: 8.5in;
  position: relative;
}
.cert-img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.cert-content {
  height: calc(100% - 1.6in);
  width: calc(100% - 2.8in);
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.8in 1.4in;
  display: flex;
  flex-direction: column;
}
.row {
  width: 100%;
  display: inline-block;
  color: black;
  font-size: 20pt;
  display: flex;
}
.row span,
.row .v-stack {
  flex: 1;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.row-padding {
  height: 0.4in;
}
.val {
  color: red;
}
#valid-to,
#valid-to-value,
#addr-2 {
  text-align: right;
}
#tax-license,
#sig {
  text-align: center;
}
.row-2 {
  margin-bottom: 0.3in;
}
.holder {
  text-align: center;
}
.row-3 {
  margin-bottom: 0.3in;
}
.row-4 table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18pt;
}
.row-5 {
  height: 2in;
  flex: 1;
}
.row-5 p {
  width: 100%;
  text-align: center;
}
.row-6 {
  margin-bottom: 0.5in;
}
@page {
  margin: 0;
  size: 14in 8.5in landscape;
}
@media print {
  .cover {
    display: block;
  }
  button {
    display: none;
  }
}

<div class="cover">hello again!</div>
<section class="cert">
  <img class="cert-img" src="https://i.stack.imgur.com/JwmVt.png" />
  <div class="cert-content">
    <div class="row row-0 row-padding"></div>
    <div class="row row-1">
      <span id="valid-from">valid from</span>
      <span id="tax-license">tax license <span class="val" id="tax-license-value">000000</span></span>
      <span id="valid-to">valid to</span>
    </div>
    <div class="row row-2">
      <span class="val" id="valid-from-value">date</span>
      <span class="val" id="valid-to-value">date</span>
    </div>
    <div class="row row-3">
      <span class="holder val">holder name</span>
    </div>
    <div class="row row-4">
      <table class="val">
        <tr>
          <td>Allowed to sell</td>
          <td>Allowed to sell</td>
        </tr>
        <tr>
          <td>Allowed to sell</td>
          <td>Allowed to sell</td>
        </tr>
      </table>
    </div>
    <div class="row row-5">
      <p>The business named above...</p>
    </div>
    <div class="row row-6">
      <div class="v-stack" id="addr-1">
        <ul>
          <li>pobox</li>
          <li>addr</li>
        </ul>
      </div>
      <span class="val" id="sig"><img />signature</span>
      <div class="v-stack" id="addr-2">
        <ul>
          <li>pobox</li>
          <li>addr</li>
        </ul>
      </div>
    </div>
  </div>
</section>
<button onclick="window.print()">Print</button>