Generating HTML for the HTML2PDF Service

Below is a complete example of generating HTML for purposes of passing it to the HTML2PDF service.

Note that your HTML must be in XHTML format. This means that all elements must be "closed" elements. For example <br> is not valid but <br/> is. And <img src='...'> is not valid but <img src='...' /> is.

Most of CSS 2.1 is supported. There are also a few additional CSS options for page specific formatting as shown below.

BEGIN

  DECLARE logoURL VARCHAR(1024) DEFAULT 'https://www.appsynergy.com/icons/logo/appsynergy/appsynergy-logo-large.png';
  DECLARE html MEDIUMTEXT;
  DECLARE v_invoice_terms VARCHAR(50) DEFAULT 'NET 30';

  -- start HTML
  SET html = '<html><head>';
  
  -- style sheet - non-standard CSS noted with comments below
  SET html = concat(html, '<style>');
  SET html = concat(html, 'body {font-family: sans-serif; font-size: 12px; line-height: 120%;}');
  SET html = concat(html, '@page { @bottom-center { content: "Page " counter(page) " of " counter(pages); } }'); -- page numbers
  SET html = concat(html, 'table {border-collapse: collapse; width: 650px; margin: 10px; font-size:inherit; font-family: inherit;}');
  SET html = concat(html, 'table { -fs-table-paginate: paginate; -fs-page-break-min-height: 50px; }' ); -- repeat table header on each page
  SET html = concat(html, 'table, th, td {border: 1px solid black;}');
  SET html = concat(html, 'tr {page-break-inside: avoid;}'); -- makes rows break cleanly
  SET html = concat(html, 'th {font-weight: bold; padding: 5px; background-color:rgb(245,245,245);}');
  SET html = concat(html, 'td {padding: 5px;}');
  SET html = concat(html, 'td.summary {text-align: right; border: none;}');
  SET html = concat(html, 'td.summary-data {text-align: right;}');
  SET html = concat(html, 'td:nth-child(4), td:nth-child(5) {text-align: right;}');
  SET html = concat(html, 'div.info-box {display:inline-block; vertical-align:top; width:300px; height:auto; margin:5px; border:0px solid black; padding:5px;}');
  SET html = concat(html, '</style>');
  
  -- open body
  SET html = concat(html, '</head><body>');
  
  -- box 1 - logo
  SET html = concat(html, '<div class="info-box"><img src="', logoURL, '" style="max-width:200px" /></div>'); -- the trailing / character on IMG tags is REQUIRED by XHTML
  
  -- box 2 - INVOICE #
  SET html = concat(html, '<div class="info-box">');
  SET html = concat(html, '<b>INVOICE #:</b> ', 12345, '<br/>');
  SET html = concat(html, 'Invoice Date: ', DATE_FORMAT('2020-09-04', '%m/%d/%Y'), '<br/>');
  SET html = concat(html, 'Terms: ', parasql_escape_html(v_invoice_terms), '<br/>'); -- ALWAYS escape variables with parasql_escape_html()
  SET html = concat(html, '</div>');
  
  SET html = concat(html, '<br/>'); -- the trailing / character is REQUIRED by XHTML 
  
  -- box 3 - REMIT TO
  SET html = concat(html, '<div class="info-box">');
  SET html = concat(html, '<b>REMIT TO:</b>', '<br/>');
  SET html = concat(html, 'My Company LLC','<br/>');
  SET html = concat(html, '456 Main St.','<br/>');
  SET html = concat(html, 'New York, NY 10023','<br/>');
  SET html = concat(html, '</div>');
  
  -- box 4 - BILL TO
  SET html = concat(html, '<div class="info-box">');
  SET html = concat(html, '<b>BILL TO:</b>', '<br/>');
  SET html = concat(html, 'ACME LLC', '<br/>');
  SET html = concat(html, '123 Main St', '<br/>');
  SET html = concat(html, 'Palm Beach, FL 33458', '<br/>');
  SET html = concat(html, '</div>');
  
  SET html = concat(html, '<br/>');
  
  -- start table
  SET html = concat(html, '<table>');
  
  -- table header
  SET html = concat(html, '<thead><tr><th>Item #</th><th>Description</th><th>Qty</th><th>Unit Price</th><th>Total</th></tr></thead>');

  -- FOR EACH ROW - this would be in a loop
  SET html = concat(html, '<tr><td>4567</td><td>XYZ Product Description</td><td>10</td><td>$25.00</td><td>$250.00</td></tr>');
  SET html = concat(html, '<tr><td>4567</td><td>XYZ Product Description</td><td>10</td><td>$25.00</td><td>$250.00</td></tr>');
  SET html = concat(html, '<tr><td>4567</td><td>XYZ Product Description</td><td>10</td><td>$25.00</td><td>$250.00</td></tr>');

  -- table footer
  SET html = concat(html, '<tr><td class="summary" colspan="4">Subtotal:</td><td class="summary-data">$', 750.00, '</td></tr>');
  SET html = concat(html, '<tr><td class="summary" colspan="4">Shipping:</td><td class="summary-data">$', 0.00, '</td></tr>');
  SET html = concat(html, '<tr><td class="summary" colspan="4">Total:</td><td class="summary-data">$', 750.00, '</td></tr>');
  
  -- end table
  SET html = concat(html, '</table>');
  
  -- close body
  SET html = concat(html, '</body></html>');
  
  -- return the HTML
  RETURN html;
END

Special HTML/CSS Requirements

The HTML to be used for PDF generation must be in XHTML format. XHTML requires that all elements are closed (e.g. <br> will NOT work but <br/> will; <img> will NOT work but <img/> will).

Most of CSS 2.1 is supported. In addition there are additional directives you can use for things like page numbers in footers or repeating the header of an HTML table across the top of multiple page; we have included these in the example above.

CSS for page numbering:

@page { 
  @bottom-center { content: "Page " counter(page) " of " counter(pages); } 
}

CSS for making a table header repeat at the top of each printed page:

table {
  -fs-table-paginate: paginate; 
  -fs-page-break-min-height: 50px; 
}