无法使用 Angular 6 Type 脚本在打印预览页面上使用 CSS 呈现数据答案

【问题标题】：Unable to render data with CSS on print preview page using Angular 6 Type script无法使用 Angular 6 Type 脚本在打印预览页面上使用 CSS 呈现数据
【发布时间】：2020-01-06 23:46:12
【问题描述】：

我想打印用户票。为此，我的打印票尺寸将是宽度：2.1 和长度：3.9。我能够在打印预览页面上呈现数据，但在将 CSS 应用于打印预览页面时遇到问题。代码：

输入：

•   0: Array(2)
•     0: {First_name: "Amy", Last_name: "Jenkins"}
•     1: {First_name: "asd", Last_name: "Jenkins"}

HTML：

<form>
<div class="container">
    <div class="divBox page" id="print_box">
        <tr *ngFor="let user of printDataArray">
            <div class="divBoxin" >
                <p align=center><b>{{ user.First_name}} {{user.Last_name}}</b></p>  
                <br>
            </div>
            <br>
            <br>
        </tr>
    </div>
    <div class="buttonHolder">
        <button class="btn btn-primary button" type="Submit" (click)="printTicket('print_template_box')"></button>
    </div>
</div>

CSS：

.button{
    background: url("../../../assets/print.PNG") top right no-repeat;
    height:80px;
    width: 80px;
    //margin-top: 0px;
    margin-right: 150px;

    background-color: #F4F6F6;
    }



.buttonHolder{
    text-align: center;
    padding-left: -100px;
}

.div{
    margin: 0 auto;
    margin-top: 20px;
    background-color: rgb(243, 245, 245);
    margin-left: 10px;
    text-align: center;
}

.divBox{
    margin: 0 auto;
    margin-top: 20px;
    background-color: rgb(243, 245, 245);[![expected output][1]][1]
}

.divBoxin{
    background-color: rgb(203, 230, 227) !important;
    border:5px solid black; 
    height: 100px;
    width: 400px;
    //size: 2.1in 5.9in;
}

.h2{
    margin:"center";
    margin-top: 25px;
}

.page {
    size: 2.1in200 3.9in;
    background-color: rgb(129, 36, 36) !important;
    -webkit-print-color-adjust: exact !important; 
}

打印功能：

    printTicket(print_template) {


      let innerContents = document.getElementById(print_template).innerHTML;
      //'', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no'
      popupWinindow = window.open();
      popupWinindow.document.open();
      popupWinindow.document.write('<html><head><link rel="stylesheet" href="./print-ticket.component.scss" type="text/css" media="print" ></head><body onload="window.print()">' + innerContents + '</html>');
      //popupWinindow.document.write(innerContents);
      popupWinindow.document.close();

  }

第一个图像是当前输出，我期待像第二个和第三个图像这样的输出。
当我调用打印函数时，我想显示票证预览并以 2.1 英寸、3.9 英寸大小打印。
如果有不止一张票，则将打印页面添加到队列中（这里我们有两张票要一张接一张地打印）。

打印机名称：兄弟标签打印机QL-810w（用于不干胶打印）

【问题讨论】：

标签： html css angular typescript angular6

【解决方案1】：

如果您使用的是 Bootstrap，它将从打印中删除任何背景颜色。如果您使用的是其他框架，则可能会这样做。

在 bootstrap.css 中，这就是您要查找的内容：

@media print {
    * {
        color: #000 !important;
        text-shadow: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

你可以删除背景属性

【讨论】：

我只使用按钮，我想做的主要事情是大小。
如果你有 Bootstrap，仍然有一个打印断点，就是这样做的。我会更新我原来的答案。

【解决方案2】：

你必须在ts文件上写css。

printTicket(print_template) {

    let innerContents = document.getElementById(print_template).innerHTML;

    const popupWinindow = window.open();
    popupWinindow.document.open();
    popupWinindow.document.write('<html><head></head><body onload="window.print()">' + innerContents + '</html>');
    popupWinindow.document.write(`<style>
    .div{
        margin: 0 auto;
        margin-top: 20px;
        background-color: rgb(243, 245, 245);
        margin-left: 10px;
        text-align: center;
    }

    .divBox{
        margin: 0 auto;
        margin-top: 20px;
        background-color: rgb(243, 245, 245);
    }

    .divBoxin{
        background-color: rgb(203, 230, 227) !important;
        border:5px solid black; 
        height: 100px;
        width: 400px;
    }

    .h2{
        margin:"center";
        margin-top: 25px;
    }
    </style>
  `);
    popupWinindow.document.close();

 }
}

【讨论】：