Create PDF Document with JavaScript

From SmartWiki
Revision as of 17:11, 4 January 2013 by Cameron (talk | contribs)

Jump to: navigation, search

Many SmartSimple components can be easily converted to PDF using baseline functionality such as the Web Page View Field.

It is also possible to generate PDF documents from any HTML encoded text. For example:

  • Reports
  • Web Page View Field if you wish to manipulate the HTML using JavaScript prior to generating the PDF. (Using the standard feature to convert Web Page View into a PDF will will render using the initial HTML and not the HTML after being manipulated by JavaScript)

This is accomplished by submitting a form containing an input named "txt" to the SmartSimple pdfWriter page. 

Note: use of these techniques requires knowledge of HTML and JavaScript



To convert a report to PDF you could add the following code to the Header on the Report Template 

<div style="pd4ml-display:none">
<form name="CreatePDF" action="/pdfWriter" method="POST">
    <input type="hidden" id="PDFcontent" name="txt"/>
    <input type=submit class="Button" value="Create PDF" onclick="this.form.txt.value=document.getElementsByTagName('HTML')[0].outerHTML;">
</form>
</div>

Note:

  • If the report is rebuilt the code will be removed from the Header and will need to be re-added
  • style="pd4ml-display:none" is included so that the content within that "div" is not included on the PDF. See PDF Writer Custom Tags for more information.
  • If the report is broken onto multiple pages only the visible page will be converted to PDF. You can click Show All to create a PDF of the full report.


To convert a report to PDF you could also include the following code in the body of the Report Template 

<html>
<body>

<div style="pd4ml-display:none">
@navbar@
<form name="CreatePDF" action="/pdfWriter" method="POST">
    <input type="hidden" id="PDFcontent" name="txt" value="" style="width:0px; display:none"/>
    <input type=submit class="Button" value="Create PDF" onclick="this.form.txt.value=document.getElementsByTagName('HTML')[0].outerHTML;">
</form>
</div>

<table>
@rows@
</table>

</body>
</html>


This technique can be used to create a single PDF document that contains multiple records. For example, if you wish to create a one-page Executive Summary of all the Level 1 records that you have at a given status such as Under Review.

  1. On the Level 1 Record create a Read Only System Variable custom field that contains HTML


See Also

Retrieved from ‘https://wiki.smartsimple.com/index.php?title=Create_PDF_Document_with_JavaScript&oldid=12282’