Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove/change print document margin in printTask?

I wonder how I can achieve a borderless print.

At the moment my output looks like this:

border I'm referring to is marked red

I'd like to have the image start at the very top left corner. Is this possible? I already tried to set a negative margin to my print-style box, but the image will get cut then.

I know that maybe not all printers are capable of printing the area of the border, but in my use-case the picture will be white in these areas. (The mountain-image is just for demo purposes)

Can I specify the document border somehow via printTask?

See my current setup:

HTML:

<div id="pdf-render-output"></div>

CSS:

body > #pdf-render-output {
    display: none;
}

@media print {

    body > * {
       display:none;
       max-width: 100%;
    }

    html {
       max-width: 100%;
       border-top: 0;
    }

    body > #pdf-render-output {
        display: block;
        border: none;
        max-width: 100%;
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0; /* I tried to set negative margin/padding eg. here */
        padding: 0;
    }

}

JS:

$('#pdf-render-output').append("<img src="..." style=\"width: 100%\" />");

I played around with all possible margins/paddings and stuff, but the image will get cut and the white border stays 'over' it.

I hope that there might be a printTask-option I missed browsing the msdn?

Update: I tried to set all margin/padding/border values with !important. No change. Here is a screenshot from the simulator, displaying only the print-css-style: enter image description here

I got to the point thinking it's an issue with the printTask itself. Are there any options regarding to this problem?

like image 411
malte Avatar asked Nov 17 '25 22:11

malte


1 Answers

If the margin values of DocumentSource is set to 0, gaps will decrease very much. However, compared with PrintTask by C#+XAML, a top margin(Probably header/footer area) is made a little.

var printTask = printEvent.request.createPrintTask("Print Sample", function (args) {
    var src = MSApp.getHtmlPrintDocumentSource(document);
    src.rightMargin = 0;
    src.leftMargin = 0;
    src.topMargin = 0;
    src.bottomMargin = 0;
    src.shrinkToFit = false;
    args.setSource(src);
}

In my environment, when this CSS was used, it has removed the margin without the necessity for src.rightMargin, etc.

@page {
    margin:0cm;
}
like image 143
Tank2005 Avatar answered Nov 20 '25 12:11

Tank2005



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!