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?

有帮助吗?

解决方案

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;
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top