html2canvas zoom problem on capture image when printing

Viewed 169

I'm trying to print an element with html2canvas. But it gives empty space from left and it shows like below image. There isn't any scroll in the page. I tried lots of solution but nothing works.

my html code:

 <div *ngIf="journeyAnalizeData" class="row rowmargin0">
            <div class="col-lg-12 col-xl-12 gridPadding">
                <div id='printArea'>
                    <table id="tableList" class="table-list">
                        <tr>
                            <td
                                style="text-align: center; color:Black;background-color:White;border-style:None;width:247px;vertical-align:Top;padding: 0px;">
                                <div id="container" class="container">
                                    <div style="width: 100%; text-align: center; font-size: 14pt; font-weight: bold; display:flex; flex-direction: column;">
                                        <div class="buttons" style="display:flex; justify-content: flex-start;">

                                            <button class="print-button" (click)="print()"
                                                 
                                                ><i
                                                    class="fa fa-print" aria-hidden="true"></i>
                                                {{'report.fms.journeyAnalize.yaziciyagonder' |
                                                translate}}
                                            </button>

My code ts code:

print() {

        html2canvas(document.querySelector("#printArea"), <any>{
            useCors: true,
            allowTaint: false,
            
        }).then(canvas => {
            
            var nWindow = window.open("");

            nWindow.document.body.appendChild(canvas);

            nWindow.focus();
            nWindow.print();
        });

    }

enter image description here

0 Answers
Related