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

Question

我要打印用户票。为此，我的打印票尺寸为宽度：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（用于贴纸打印）

Answer 1

如果您使用的是 Bootstrap，这将从打印中删除任何背景颜色。如果您使用的是另一个框架，那可能会做同样的事情。

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

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

您可以删除背景属性

Answer 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();

 }
}

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

Unable to render data with CSS on print preview page using Angular 6 Type script

html

css

typescript

angular

angular6