HTML2PDF Module not rendering valid html or css correctly

Technical Support Apryse SDK
, , , ,
1

Product: @pdftron/pdfnet-node

Product Version: 10.4.0

Please give a brief summary of your issue:
Hello i am in the process of building out a PDF engine for our reporting platform with a set of basic HTML templates that clients can choose and then use in their reports. It seems that nearly all the HTML or CSS i try to use doesn’t behave or render correctly. I am using as basic of HTML and CSS as you can do and still things are not working. I have been through the documentation for the module numerous times but unfortunately there is not too much in terms of documentation or example on the current site which hopefully we can address over time for other clients as well.

There are a few things I am trying to accomplish:

  • Custom headers and footers for clients that include their image and brand colors. I am trying to use flex box and background colors to accomplish this very simple layout and it works in js fiddle but returns nothing but plain text when i use the module.setHeader(custom_html_code) or module.setFooter(custom_html_code) . It ignore any css i throw at it besides font color and size. And i haven’t found any documentation that says one way or another what it supports.

header
header1121×114 5.74 KB
This is a header iam trying to achieve and it seems impossible at the moment via setHeader().

  • Tables
    I noticed that it does not like when I use the or HTML tags, and if i add with cell padding of 4px i get weird table row overhang. Can you not use pixel based padding?

  • The following CSS properties don’t seem to work to achieve the repeating header and footer rows across pages: display: table-header-group;display: table-footer-group;

overhang
overhang1626×344 58.2 KB

  • General layout questions:
    I am trying to make 2 column / 4 quadrant kind of layouts using Flexbox and css grid and they don’t seem to work 100% correctly. Especially when some items such as charts are given an exact height. Is setting exact heights prohibited in this module?

Really appreciate any support you can provide.

Thanks,
Tyler

1 Like
2

Thank you for contacting Apryse support.

I’m reviewing your request and will get back to you shortly.

2 Likes
3

When did this start occurring? What changed at that time?

Please provide full error message, stack trace, and any related logs.

Are you able to reproduce the issue using one of the sample projects in our SDK?

Or does this only occur in your own project? If so, we would need access, or related code snippets.

Is the issue specific to a certain file? If so, we would need that file to diagnose further.

Does the issue occur, or not occur, on certain devices? If so please provide details.

What version of our SDK are you using?

1 Like
4

When did this start occurring? What changed at that time?

  • Just downloaded and started a fresh NodeJS project based on the sample get started stuff. So from the very beginning I have had this issue.

Please provide full error message, stack trace, and any related logs.

  • I am not getting an error messages, technically the PDF is rendering successfully it just doesn’t seem to be honoring valid html or CSS, is there documentation on this module that explains what all you can do?

Are you able to reproduce the issue using one of the sample projects in our SDK?
const { PDFNet } = require(‘@pdftron/pdfnet-node’);
const PDFTronLicense = require(‘…/LicenseKey/LicenseKey’);

((exports) => {
‘use strict’;

exports.runHTML2PDFTest = () => {
const main = async () => {
const outputPath = ‘…/TestFiles/Output/html2pdf_example’;
await PDFNet.HTML2PDF.setModulePath(‘…/…/lib/’);

  if (!(await PDFNet.HTML2PDF.isModuleAvailable())) {
    console.log(
      'Unable to run HTML2PDFTest: Apryse SDK HTML2PDF module not available.'
    );
  
    return;
  }

  try {
    const html2pdf = await PDFNet.HTML2PDF.create();
    const doc = await PDFNet.PDFDoc.create();
    const html =
      '<html><body><h1>Heading</h1><p>Paragraph.</p></body></html>';
    const header = `<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Footer</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <style>
    
          header {
            margin: 0 0.39in;
            display: flex;
            font-size: 10px;
            color: purple;
            justify-content: space-between;
            background-color: red !important;
          }
        </style>
      </head>
      <body>
        <header style="background-color: green;">
          <div>
            <svg
              aria-hidden="true"
              class="pre-logo-svg"
              focusable="false"
              viewBox="0 0 24 24"
              role="img"
              width="24px"
              height="24px"
              fill="none"
            >
              <path
                fill="currentColor"
                fill-rule="evenodd"
                d="M21 8.719L7.836 14.303C6.74 14.768 5.818 15 5.075 15c-.836 0-1.445-.295-1.819-.884-.485-.76-.273-1.982.559-3.272.494-.754 1.122-1.446 1.734-2.108-.144.234-1.415 2.349-.025 3.345.275.2.666.298 1.147.298.386 0 .829-.063 1.316-.19L21 8.719z"
                clip-rule="evenodd"
              ></path>
            </svg>
          </div>
    
          <span>PDFTRON Hedaer EXAMPLE</span>
    
          <div style="background-color: blue !important">
            <span class="pageNumber"></span>
          </div>
        </header>
      </body>
    </html>
    `;

    html2pdf.setHeader(header);
    html2pdf.setMargins('1cm', '2cm', '.5cm', '1.5cm');
    html2pdf.insertFromHtmlString(html);
    await html2pdf.convert(doc);
    doc.save(
      outputPath.concat('_04.pdf'),
      PDFNet.SDFDoc.SaveOptions.e_linearized
    );
  } catch (err) {
    console.log(err);
  }
};
PDFNet.runWithCleanup(main, PDFTronLicense.Key)
  .catch(function (error) {
    console.log('Error: ' + JSON.stringify(error));
  })
  .then(function () {
    return PDFNet.shutdown();
  });

};
exports.runHTML2PDFTest();
})(exports);
// eslint-disable-next-line spaced-comment
//# sourceURL=HTML2PDFTest.js

Based on this Apryse Documentation | Documentation

Or does this only occur in your own project? If so, we would need access, or related code snippets.

  • Looks to occur on all projects.

Is the issue specific to a certain file? If so, we would need that file to diagnose further.

  • Doesnt seem to be isolated, across the board i get the same issue rendering.
    Does the issue occur, or not occur, on certain devices? If so please provide details.
    It occurs on both Mac and iwndows modules of HTML2PDF that i have tried so far. I dont have a linux machine to confirm that OS.

What version of our SDK are you using?
The latest version 10.4.0 of @pdftron/pdfnet-node

1 Like
5

The module is using Chromium headless, so generally speaking, you can preview your HTML in Chrome print dialog, and Apryse HTML2PDF module output.

As for the header/footer HTML/CSS support see here, though as mentioned it is not 100% documented by Chromium.

1 Like
6

@Ryan - Thanks for sharing this, do you have any examples of how to add background colors or basic css to this header? OR have a way via Apryse to not use this setHeader and instead make a custom div that repeats on every page? Really just looking for any example code you may have cause I’m struggling to find any decent documentation regarding support.

1 Like
7

No, I don’t have any specific examples.

If the Chromium header/footer option is not enough for you, you could instead leave the header/footer blank, and post process the PDF file afterwards.

For instance you could use our Stamper class to fill in the header/footer blank margin area.

Furthermore, you could use the HTML2PDF module to convert your header/footer to PDF separately, and then use Stamper.StampPage to stamp that to original PDF from HTML2PDF module. See this forum post for more about this route.

1 Like