HtmlComponents: Howto create a page (electronic paper), exactly filling A4 size ?

[Rollo62 536]

Hi there,

 

I would like to use the wonderful HtmlComponents HtmlEditor for creating a single or multiple page PDF documents, as eDocument,

with sections (header/footer) and/or background image(s)/icons, that covers the whole page to simulate a border-less PDF printout.

 

This shall be used like a normal, printed business paper, invoice, etc.

 

The result could look like that, but of course even more fancy and colorful too:

 

In some overlay areas there should be the normal text, which can be entered in the document,
so that the whole page might be converted to PDF, and sended as eInvoice or other ePaper.

The whole documents would act as template for the editor.

 

The question is how could that be arranged best, with HtmlComponents, since I would like to use HTML-based documents right from the start.

One option would be to automate MsWord/LibreWriter, with templates, but I prefer the HTML as more future-ready and simple solution.

From HTML5 / CSS, I know that they were not so good to define such fixed sized, pixel-perfect, pages, especially when pagination comes into mind, like for standard A4 pages (  210 x 297 mm ).

There could be one background image behind the whole A4 page, but this would be quite large.

 

If I use several, separate footer, header sections, then they may drift off A4 size easily.

 

So I wonder how I could make use of HtmlComponents, and HtmlEditor, to get this solved.

Shall I use HTML itself, to define everything, or can HrmlEditor help to produce that.

 

Maybe some of you would propose the reporting features in the first place, but
I would like to keep the document as manually editable page too, just like maybe MsWord, LibreOffice templates would work.

 

If that can be solved, how can I convert the whole thing as border-less PDF ?

I had not yet worked too much with advanced layout options of the HtmlEditor, but it brings all I should have, in my opinion.

Only how do I get started best, with a pre-printed template with header, footer, logo, body, etc.. ?

 

 

[Alexander Sviridenkov 356]

Header and footer should be defined manually, library supports CSS position: running(heading/footer)

 

Quote

Page header and footer can be defined using any block element and CSS style position: running(heading/footer). Example:

<style>
footer {position: running(footer); text-align: center; border-top: solid #aaa 1px; text-align: center; font-size: 9pt; left: 5%; width: 90%; height: 36px }
.pagecount:before {content: counter(pagecount)}
</style>

<footer>Page <span class="page"></span>/<span class="pagecount"></span></footer>

This sample also contains page number and page count which are defined using content property.
Footer size is calculated automatically from page footer block height.

Document can contain several headers/footers. CSS property page is used for  selecting  on which page header/footer will be displayed.
 page can have following values:

 last: only last lage
 last-: all pages before last
 odd: odd pages
 even: even pages
<number> (1,2,..): only <number> page  
<number+> all pages after <number>

To set page margins use CSS style:

@page {margin: 0px 0px 0px 0px}

Page background can be defined by image in header with fixed position and 100% width/height.

To split document to pages add CSS page-break-before/after: always to any element.

Finally call THtDocument.HTMLtoPDF

 

Quote

PDF export is available on all platforms, but on Windows it requires free SynPDF library. Please download this library, add its path into IDE library path list, uncomment
{$DEFINE SYNPDF} in htmlinc.inc and add htsynpdf unit into uses list.

To export into PDF without creating THtDocument use the following class methods of THtDocument:

    class function HTMLtoPDF(const AHTML: hstring; const AStyles: hstring = ''): TBytes;
    class procedure HTMLtoPDFFile(const AHTML, FileName: string);

Normal THtDocument created for displaying cannot be used for PDF export. Create separate THtDocument using CanvasClass.PrintCanvasClass, prepare paged layout and then use Surface.G.SavetoPDFFile/SavetoPDFStream methods.
Example:

var 😧 THtDocument;
begin
  {$IFDEF FMX}
  D := THtDocument.Create(HtFMXDefaultCanvasClass.PrintCanvasClass);
  {$ELSE}
  D := THtDocument.Create(HtDefaultCanvasClass.PrintCanvasClass);
  {$ENDIF}
  try
    D.Parse(AHTML);
    D.GeneratePagesForPrint;
    D.Surface.G.SavetoPDF(FileName);
  finally
    D.Free
  end;

 

 

[Rollo62 536]

@Alexander Sviridenkov

Thanks for the explanation, but unfortunately I don't get to a working sample with the HtmlComponents yet.

I use the current version V440, inside the VCL-Editor-Demo.

 

Inspired from this page-like HTML here, this is the live-view, I've tried to add the background images as header/footer.

This doesn't work well in HTML, I've tried different examples from W3C, etc.

What is working in the right direction, at lease under HTML, is to put a whole DinA4 PNG as background, which of course eats more memory.

That would be acceptable.

 

I've used the DinA4 sheet from the link above, and combined the separate CSS all in the local style of the index.html page.

And I "designed" a sample business A4-paper here, which is loaded from URL in the sample.

You can check the sample 003.zip enclosed, in the browser.

I included all CSS and images in the HTML itself, or via link.

 

When I load that into the HtmlEditor, I see different page sizes and page breaks, and not really the same results as in browsers.

 

Maybe you can have a look at the sample, what can be the problem and what could be optimized here to get the same view as in normal browsers.

 

Of course this is a nice view in browsers, but also there the complete print doesn't work, they leave out the background image,

and print only the text, when I try to /file/print/to pdf.

I think the culprit is maybe the media query "print" inside the CSS, but have not really checked this.

 

Anyway, my goal is to have that very same document view, printed to PDF.

 

 

 

003.zip

Edited August 3, 2021 by Rollo62

[Alexander Sviridenkov 356]

As I wrote previously, this can be solved by image in page header (position: running(heading)). Please use the following HTML:

 

<!DOCTYPE html>
<html>
<style>
.page {page-break-before: always}
@page {size: A4 portrait; margin: 0px}
</style>
<body>

  ...document content...

  <div style="position: running(heading);height:70px">
    <img style="position:fixed;top:-100%; left:0px;" src="_INCLUDED_VIA_LINK_Briefbogen_Demo_Full.png" width="100vw" height="100vh"/>
  </div>

</body>
</html>

	

Result:

 

[Rollo62 536]

Thanks I will check that.

But the image also shows that the bottom has a gap to the papersize.

The image is exactly 210x297mm and would be exactly 1 page.

 

Ive  played around with HTML + CSS in VsCode and  browser , which has many options,  but also issues with print pages. 

Flexbox is nice, but is rescaling dynamically,not perfect for fixed layouts. 

Tablet does better, and allow good structuring of the page, quite like Excel,

But is heavy too.

 

If even browsers have problems to render that, I doubt that HtmlEditor can handle that well.

The demos included table definition, but it seems there were more options in earlier versions. 

Just a tummy feeling, but was Table handling changed in the last versions? 

I remember it could do better before. 

 

Can HtmlEditor work in complex flexbox layouts?  I doubt that, at least I see only table as a workable way. 

 

Edited August 6, 2021 by Rollo62

[Alexander Sviridenkov 356]

This is my fault, code for image should be

 

 <img style="position:fixed;top:-100%; left:0px;" src="_INCLUDED_VIA_LINK_Briefbogen_Demo_Full.png" width="210mm" height="297mm"/>
 

 <img style="position:fixed;top:-100%; left:0px;" src="_INCLUDED_VIA_LINK_Briefbogen_Demo_Full.png" width="210mm" height="297mm"/>
 

because 100vh is calculated from inner page size. Using this code image covers page exactly.

flexbox is supported in 4.4, but for paged media tables have better support (spliting across pages).