The margins suppression is not working at all on windows

[panawe]

I cannot seem to get control on the margin at all during windows print. (See attached image).

This is the code I am calling to print.

public printDocument(content: string) { this.printer.isAvailable().then((onSuccess) => { const options: PrintOptions = { name: 'Receipt', // margin: false, copies: 1, margin: { top: '0mm', left: '0mm', right: '0mm', }, paper: { name: 'Roll04Inch', width: '80mm', height: '297mm', length: '297mm', }, }; this.printer.print(content, options); }, (err) => { console.log('Error', err); }); }

This is the sample html I am passing in the content.

<style>@page{margin-left: 1px;margin-right: 1px;margin-top: 1px;margin-bottom: 1px;}</style><div style="margin-right:0px;margin-left:0px;"><h1 style="font-size: 32px; text-align:center;">Demo</h1><h6 style="text-align:center; margin:0px;">Tel: 90499503</h6><hr/><br/>Tbl: Table 03<br/>No: 000504328<br/><table style="width: 100%;border-collapse: collapse;"><tr class="tabletitle"><th style="width:50%; text-align:left"><h6 style="font-size: 16px; margin:0px;">Article</h6></th><th style="width:15%; text-align:center"><h6 style="font-size: 16px; margin:0px;">Qty</h6></th><th style="width:35%; text-align:right"><h6 style="font-size: 16px; margin:0px;">Price</h6></th></tr><tr><td style="width:50%; text-align:left"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">Steak with pepper </p><p></p></td ><td style="width:15%; text-align:center"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">1</p></td ><td style="width:35%; text-align:right"> <p style="font-size: 16px;color: #666;line-height: 1.2em;"> 5500 CFA</p></td></tr><tr><td style="width:50%; text-align:left"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">Rice/cream sauce/spun steak</p><p></p></td ><td style="width:15%; text-align:center"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">1</p></td ><td style="width:35%; text-align:right"> <p style="font-size: 16px;color: #666;line-height: 1.2em;"> 4500 CFA</p></td></tr><tr><td style="width:50%; text-align:left"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">Sliced beef with mushrooms</p><p></p></td ><td style="width:15%; text-align:center"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">1</p></td ><td style="width:35%; text-align:right"> <p style="font-size: 16px;color: #666;line-height: 1.2em;"> 4000 CFA</p></td></tr><tr><td style="width:50%; text-align:left"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">Poulet bicyclette</p><p></p></td ><td style="width:15%; text-align:center"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">1</p></td ><td style="width:35%; text-align:right"> <p style="font-size: 16px;color: #666;line-height: 1.2em;"> 20000 CFA</p></td></tr><tr><td style="width:50%; text-align:left"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">couscous</p><p></p></td ><td style="width:15%; text-align:center"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">1</p></td ><td style="width:35%; text-align:right"> <p style="font-size: 16px;color: #666;line-height: 1.2em;"> 1000 CFA</p></td></tr><tr><td style="width:50%; text-align:left"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">Rack of beef with olives</p><p></p></td ><td style="width:15%; text-align:center"> <p style="font-size: 16px;color: #666;line-height: 1.2em;">2</p></td ><td style="width:35%; text-align:right"> <p style="font-size: 16px;color: #666;line-height: 1.2em;"> 300 CFA</p></td></tr><tr><td style="text-align:right;"><h6 style="font-size: 16px; margin:0px;">Rebate</h6></td><td style="text-align:right;" colspan="2"><h6 style="font-size: 16px; margin:0px;"> 0 CFA</h6></td></tr><tr><td style="text-align:right;"><h6 style="font-size: 16px; margin:0px;">Total</h6></td><td style="text-align:right;" colspan="2"><h6 style="font-size: 16px; margin:0px;"> 35300 CFA</h6></td></tr><tr><td style="text-align:right;"><h6 style="font-size: 16px; margin:0px;">Cash</h6></td><td style="text-align:right;" colspan="2"><h6 style="font-size: 16px; margin:0px;"> 0 CFA</h6></td></tr><tr><td style="text-align:right;"><h6 style="font-size: 16px; margin:0px;">Change</h6></td><td style="text-align:right;" colspan="2"><h6 style="font-size: 16px; margin:0px;"> 0 CFA</h6></td></tr></table><hr/><br/>11.04.2023 15:04:44<h6 style="font-size: 32px; margin:0px;">Thank You ! <br/>-- Panawe P</h6></div>

[dimer47]

Hi @panawe

I too have had problems with margins when implementing this cordova plugin.
Try using the following params :

{
     border: true,
     photo: true,
}

This is works for me on iOS.

Afterwards, if you are on Windows platform and it is a BtoB application, I recommend that you use the QZTray printing solution, which is more complete and allows you to have free professional printing in your JS/TS app.

Regards from 🇫🇷

[panawe]

Hi @dimer47
border is not a supported parameter of PrintOptions. I tried it and it won't compile.
I did try photo but that did not work.
I did some quick research on QZTray and it does not look like it's supported in IONIC.

Thanks.
Panawe