Question

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?

Était-ce utile?

La solution

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;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top