Javascript 在具有背景的HTML表中打印文本

我正在尝试打印一个简单的证书。证书的文本以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;
        }
    }

 <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>

我的表格Def如下所示：

 @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;
        }
    }

 <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>

有效日期：{vendor.dstardate}
有效期至：{vendor.dEndDate}
{{vendor.sBusinessnameLegal}}
{{vendor.iSic1}}
{{vendor.iSic2}
{{vendor.iSic3}
{{vendor.iSic4}

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

 @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;
        }
    }

 <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>

html，
身体{
身高：100%；
保证金：0；
}
.掩护{
/*隐藏的掩护*/
显示：无；
身高：100%；
宽度：100%；
}
/*填满整张纸*/
.证书{
显示：块；
高度：974px；
宽度：1366px；
背景图像：url（'../Content/images/certificate.jpg'）；
背景重复：无重复；
背景位置：右上角；
背景附件：固定；
}
/*仅在打印时适用*/
@媒体印刷品{
/*打印封面*/
.掩护{
显示：块；
}
.证书{
宽度：800px；
内容：url（'../content/images/certificate.jpg'）；
左边距：-160px；
背景重复：无重复；
背景位置：右上角；
背景附件：固定；
}
.证书内容{
显示：块；
字体家族：“世纪教科书”！重要；
字体大小：40px；
字体风格：普通；
利润上限：-800px；
左边距：60像素；
}
.leftDate{
显示：块；
字体家族：“世纪教科书”！重要；
字体大小：40px；
字体风格：普通；
利润上限：-10px；
左边距：-60px；
}
/*隐藏打印中的其他元素*/
钮扣{
显示：无；
}
}
打印
求职信
我的生意
01/01/1979

甚至还没有接近

我的背景图像大小为834 x 595像素，我正试图在一份法律文件上打印

我完成的图像应该是这样的。（我为这张图片道歉，我不是设计师，只是被投入了一个慈善项目）

红色框描述了我希望如何显示服务器数据。

---

任何想法或建议都将不胜感激。谢谢…

因为打印更多地由用户的系统设置而不是由正在打印的页面来处理，所以有时需要在“打印”对话框中手动设置纸张方向和大小。
我已将此示例放在一张法律文件中。
我还将布局从表格更改为一系列行，这些行的高度可以更改

正文{
身高：100%；
宽度：100%；
保证金：0；
}
钮扣{
位置：固定；
排名：0；
左：0；
填充：10px 20px；
}
.掩护{
显示：无；
高度：8.5英寸；
宽度：14英寸；
}
.证书{
显示：块；
高度：8.5英寸；
宽度：14英寸；
最大宽度：14英寸；
最大高度：8.5英寸；
位置：相对位置；
}
.证书img{
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
}
.证书内容{
高度：计算（100%-1.6英寸）；
宽度：钙（100%-2.8in）；
位置：绝对位置；
排名：0；
左：0；
衬垫：0.8英寸1.4英寸；
显示器：flex；
弯曲方向：立柱；
}
.行{
宽度：100%；
显示：内联块；
颜色：黑色；
字号：20pt；
显示器：flex；
}
.行跨度，
.row.v-stack{
弹性：1；
}
保险商实验室{
列表样式：无；
填充：0；
保证金：0；
}
.行填充{
高度：0.4英寸；
}
瓦尔先生{
颜色：红色；
}
#有效期至：，
#对值有效，
#地址-2{
文本对齐：右对齐；
}
#税务许可证，
#信号{
文本对齐：居中；
}
.第2排{
边缘底部：0.3英寸；
}
.持有人{
文本对齐：居中；
}
.第3排{
边缘底部：0.3英寸；
}
.第4行表格{
宽度：100%；
边界塌陷：塌陷；
字号：18pt；
}
.第5排{
高度：2英寸；
弹性：1；
}
.第5排p{
宽度：100%；
文本对齐：居中；
}
.第6排{
边缘底部：0.5英寸；
}
@页面{
保证金：0；
尺寸：14英寸8.5英寸景观；
}
@媒体印刷品{
.掩护{
显示：块；
}
钮扣{
显示：无；
}
}

你好！
有效期自
税务许可证000000
有效的
日期
日期
持有人姓名
允许出售
允许出售
允许出售
允许出售
上面提到的生意


pobox
地址

签名

pobox
地址

打印