window.print Problem

steve7s · Post by **steve7s** » Mon Aug 26, 2019 8:54 am

Hallo,

I habe a simple html-Page and want to print this to pdf. But in the result the border is not printed correctly. Can anyone help me how to fix this problem? My chromium-Version is 72.0.3626.121

here is my html code:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
</head>

<body>

<div>
Hallo
<input type="checkbox" id="cb" name="A1_1">

<button>Test Button</button>

<button onclick="window.print()">Print</button>
</div>
</body>

</html>

and here the pdf-result

printTest.7z

salvadordf · Post by **salvadordf** » Mon Aug 26, 2019 9:24 am

Hi,

I loaded that html page with the latest version of CEF4Delphi and the MiniBrowser demo. I clicked the "print" button in the page and selected a CutePDF printer to get the PDF file you see in the attached file. The generated PDF file has a wider page border than the PDF file you attached.

You can also try the TChromium.PrintToPDF procedure to use the built-in PDF printing feature with the TChromium.PDFPrintOptions properties.

steve7s · Post by **steve7s** » Tue Aug 27, 2019 8:53 am

Hi salvadordf,

thanks for the fast reply.
I also tested with the latest Version (Chromium 76.0.3809.87) and the result is the same (also with the MiniBrowser demo).
By the way: if i print to a real printer the result is not correct.
The TChromium.PrintToPDF-Function works

salvadordf · Post by **salvadordf** » Tue Aug 27, 2019 9:09 am

This looks like a Chromium or CEF issue.

Please, try the official CEF Sample Application :
http://opensource.spotify.com/cefbuilds ... nt.tar.bz2

Open your HTML file, click the "print" button and select your real printer.

steve7s · Post by **steve7s** » Tue Aug 27, 2019 9:47 am

With the cefclient.exe it works for normal printer and for pdf-printer

salvadordf · Post by **salvadordf** » Wed Aug 28, 2019 5:42 pm

In the current CEF version only Linux users can customize the printer settings. Windows users only see the default print dialog.

The print-to-PDF function also has some settings to modify the PDF margins but they are not used with "window.print".

Perhaps Chromium uses different settings depending on how you load the HTML. I used the "Open file with a FILE URL" menu option in the MiniBrowser demo.
How are you loading the HTML file in MiniBrowser ?

If all fails, try using the page margins in CSS like this :
https://stackoverflow.com/questions/432 ... aked-table

steve7s · Post by **steve7s** » Thu Aug 29, 2019 7:50 am

I tried "Open file with a FILE URL", "Open file with a DATA URL" and drag and drop..nothing worked.

with the page margins the result was the same

salvadordf · Post by **salvadordf** » Thu Aug 29, 2019 9:19 am

I did more tests in a different PC.

In the previous tests I used Windows 7 64 bits in a virtual machine with CutePDF but now I used the latest Windows 10 version in a real machine with the PDF printer made by Microsoft that comes with the operating system.

I used BriskBard 1.8.1 because it uses CEF4Delphi and it has an installer with all the necessary CEF binaries. I have a hunch this issue could be caused by incomplete or incorrect CEF binaries.

I used BirskBard to open a file with these contents :

Code: Select all

<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><!-- <page size="A4"> -->
<div>Hallo<input type="checkbox" id="cb" name="A1_1">
<button>Test Button</button>
<button onclick="window.print()">Print</button>
</div></body></html>

Then I clicked the "print" button in the web page and selected the PDF printer available in Windows 10. The attached file called "without_css.pdf.zip" has the resulting PDF and it has a margin.

I also created a test in jsfiddle.net to see what happens when I add a margin in CSS :
https://jsfiddle.net/salvadordf/uof7hn43/8/

I opened that URL and used the Microsoft PDF printer. The result is the attached file called "margin_in_CSS.pdf.zip" and it also has margins.

Please, try the HTML or the jsfiddle example with BriskBard and select the Microsoft PDF printer or install CutePDF.

steve7s · Post by **steve7s** » Thu Aug 29, 2019 12:26 pm

i looked on both pdf files and in both the borders of the buttons and checkboxe are printed on another place then the objects it self (borders are printed on the top-left of the page)

salvadordf · Post by **salvadordf** » Thu Aug 29, 2019 12:34 pm

Why was I confused about "borders" and "page margins" ?!?!?!?!?

I'm so sorry... I'll take a look as soon as I can.

BriskBard, CEF4Delphi, WebView4Delphi, WebUI4Delphi and WebUI4CSharp

window.print Problem

window.print Problem

Re: window.print Problem

Re: window.print Problem

Re: window.print Problem

Re: window.print Problem

Re: window.print Problem

Re: window.print Problem

Re: window.print Problem

Re: window.print Problem

Re: window.print Problem