Print PDF Generated by jsPDF in Desktop and Mobile Devices Both

Viewed 264

I have an angular 10 application. In which on click of a button a mat-dialog is opened. Inside this mat-dialog I have a table that contains brief data of user's orders. And there is a column in that table with title Actions. In this actions column you can download and print the data related to that particular order.

Here's the code for the orders table:

order.component.html

<table mat-table class="tableclass noBottom" [dataSource]="orderDetails">
    <ng-container matColumnDef="First Name">
        <th mat-header-cell *matHeaderCellDef class="table-head">
            {{ 'orderDialog.first_name' | translate }}
        </th>
        <td mat-cell class="tablecontent" *matCellDef="let element">{{ element.FirstName }}</td>
    </ng-container>
    <ng-container matColumnDef="Middle Name">
        <th mat-header-cell *matHeaderCellDef class="table-head">
            {{ 'orderDialog.middleName' | translate }}
        </th>
        <td mat-cell class="tablecontent" *matCellDef="let element">{{ element.MiddleName }}</td>
    </ng-container>
    <ng-container matColumnDef="Last Name">
        <th mat-header-cell *matHeaderCellDef class="table-head">
            {{ 'orderDialog.last_name' | translate }}
        </th>
        <td mat-cell class="tablecontent" *matCellDef="let element">{{ element.LastName }}</td>
    </ng-container>
    <ng-container matColumnDef="Date of Birth">
        <th mat-header-cell *matHeaderCellDef class="table-head">{{ 'orderDialog.dob' | translate }}</th>
        <td mat-cell class="tablecontent" *matCellDef="let element">{{ element.DateofBirth }}</td>
    </ng-container>
    <ng-container matColumnDef="Order Name">
        <th mat-header-cell *matHeaderCellDef class="table-head">
            {{ 'orderDialog.order_name' | translate }}
        </th>
        <td mat-cell class="tablecontent" *matCellDef="let element">{{ element.orderName }}</td>
    </ng-container>
    <ng-container matColumnDef="Order ID">
        <th mat-header-cell *matHeaderCellDef class="table-head">
            {{ 'orderDialog.orderID' | translate }}
        </th>
        <td mat-cell class="tablecontent" *matCellDef="let element">{{ element.orderID }}</td>
    </ng-container>
    <ng-container matColumnDef="Actions">
        <th mat-header-cell *matHeaderCellDef class="table-head">{{ 'orderDialog.actions' | translate }}</th>
        <td mat-cell class="tablecontent" *matCellDef="let element">
            <div class="orderActions">
                <p (click)="downloadOrderInfo(element)">
                    <mat-icon class="edit-icon">file_download</mat-icon>
                </p>
                <p (click)="printOrderInfo(element)">
                    <mat-icon class="edit-icon">print</mat-icon>
                </p>
            </div>
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

My use case is to show few details about order, and when user clicks on download or print, I generate a PDF containing all the info related to that order. To generate this PDF I'm using jsPDF. I'll not be including the PDF generation utility as it's quiet big and irrelevant to include.

For printing the PDF, I followed the following approach using jsPDF's autoPrint() function:

this.orderDoc= generatePDF(this.orderDetails);
this.orderDoc.autoPrint();
this.orderDoc.output('dataurlnewwindow');

It works absolutely fine in desktop but instead of printing the PDF it downloads it in Mobile devices.

Here's another approach that I tried to print the PDF:

this.orderDoc= generatePDF(this.orderDetails);
var pdfUrl = URL.createObjectURL(this.orderDoc.output('blob'));
let newWindow = window.open(pdfUrl, "_blank");
newWindow.print();

This approach also fails in mobile devices and work great in desktop devices. It has the same behaviour as the above one.

So, is there anyway I can print the PDF created by jsPDF in both Desktop devices and Mobile devices??

0 Answers
Related