Difference between revisions of "Create PDF Document with JavaScript"

From SmartWiki
Jump to: navigation, search
 
Line 67: Line 67:
 
* [[Web Page View Field]]
 
* [[Web Page View Field]]
  
−
[[Category:PDF]][[Category:JavaScript]]
+
[[Category:PDF]][[Category:JavaScript]][[Category:Reports]]

Latest revision as of 13:01, 29 June 2017

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>

Notes:

  • 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 to prevent the content within that "div" from being 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 use the following code as 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, similar to a Mail Merge. 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 with HTML with the information you wish to display, formatted as desired. Note: the contents of this field would be very much like the contents of a Web Page View field, but only the contents within the body tag.
  2. The role permissions for this field can be set to Deny Role Access since you do not want it visible when viewing the actual Level 1 record (although you may want to make if visible temporarily while you configure the field for testing purposes.)
  3. Create a report that is filtered for the desired Level 1 records. The only field that should be visible in the report is the Read Only System Variable field created above.
  4. Use the technique described above to turn the report into a PDF. If you wish each Level 1 record to be on a separate page of the PDF you can add the following HTML to the Rows of the report <pd4ml:page.break/>


See Also

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