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

Question

I want to print user tickets. for this, my print ticket size will be width: 2.1 and Length: 3.9. I'm able to render the data on print preview page but I have an issue to apply CSS to the print preview page. Code :

Input :

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

print function :

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

  }

The first Image is current output, I'm expecting output like 2nd and 3rd image.
when I call the print function I want to show ticket preview and print with 2.1 in, 3.9 in size.
if have more than one ticket add the print page in the queue(here we have two ticket want to print one after one).

Printer Name: Brother Label Printer QL-810w (use for sticker printing)

Sourav Golui · Accepted Answer · 2019-09-04 08:01:44Z

You have to write css on ts file .

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

 }
}

Chimera · Accepted Answer · 2019-09-04 11:38:04Z

1

If you are using Bootstrap, that will remove any background color from print. If you are using another framework, that might do the same.

In bootstrap.css this is what you will be looking for:

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

You could just delete the background property

edited Sep 4, 2019 at 11:38

answered Sep 4, 2019 at 6:11

Chimera

1611 silver badge16 bronze badges

2 Comments

learner Over a year ago

I'm using only for the button and the main thing I want to do is the size.

Chimera Over a year ago

If you have Bootstrap, there is still a print breakpoint, that does this. I will update my original answer.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related