Merge pull request crabbly#662 from laercioacj/master

Add Footer

src/index.d.ts

@@ -11,6 +11,8 @@ declare namespace printJS {
     documentTitle?: string;
     header?: any;
     headerStyle?: string;
+    footer?: any;
+    footerStyle?: string;
     maxWidth?: number;
     targetStyle?: string | string[];
     targetStyles?: string | string[];

src/js/functions.js

@@ -62,6 +62,29 @@ export function addHeader (printElement, params) {
   printElement.insertBefore(headerContainer, printElement.childNodes[0])
 }
 
+export function addFooter (printElement, params) {
+  // Create the footer container div
+  let footerContainer = document.createElement('div')
+
+  // Check if the footer is text or raw html
+  if (isRawHTML(params.footer)) {
+    footerContainer.innerHTML = params.footer
+  } else {
+    // Create footer element
+    let footerElement = document.createElement('h1')
+
+    // Create footer text node
+    let footerNode = document.createTextNode(params.footer)
+
+    // Build and style
+    footerElement.appendChild(footerNode)
+    footerElement.setAttribute('style', params.footerStyle)
+    footerContainer.appendChild(footerElement)
+  }
+
+  printElement.insertBefore(footerContainer, printElement.childNodes.lastChild)
+}
+
 export function cleanUp (params) {
   // If we are showing a feedback message to user, remove it
   if (params.showModal) Modal.close()

src/js/html.js

@@ -1,4 +1,4 @@
-import { collectStyles, addHeader } from './functions'
+import { collectStyles, addHeader, addFooter } from './functions'
 import Print from './print'
 
 export default {
@@ -20,6 +20,11 @@ export default {
       addHeader(params.printableElement, params)
     }
 
+    // Add footer
+    if (params.footer) {
+      addFooter(params.printableElement, params)
+    }
+
     // Print html element contents
     Print.send(params, printFrame)
   }

src/js/image.js

@@ -1,4 +1,4 @@
-import { addHeader } from './functions'
+import { addHeader, addFooter } from './functions'
 import Print from './print'
 import Browser from './browser'
 
@@ -42,6 +42,11 @@ export default {
     // Check if we are adding a print header
     if (params.header) addHeader(params.printableElement, params)
 
+    // Check if we are adding a print footer
+    if (params.footer) {
+      addFooter(params.printableElement, params)
+    }
+
     // Print image
     Print.send(params, printFrame)
   }

src/js/init.js

@@ -18,6 +18,8 @@ export default {
       type: 'pdf',
       header: null,
       headerStyle: 'font-weight: 300;',
+      footer: null,
+      footerStyle: 'font-weight: 300;',
       maxWidth: 800,
       properties: null,
       gridHeaderStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',

src/js/json.js

@@ -1,4 +1,4 @@
-import { capitalizePrint, addHeader } from './functions'
+import { capitalizePrint, addHeader, addFooter } from './functions'
 import Print from './print'
 
 export default {
@@ -38,6 +38,11 @@ export default {
     // Build the printable html data
     params.printableElement.innerHTML += jsonToHTML(params)
 
+    // Check if we are adding a print footer
+    if (params.footer) {
+      addFooter(params.printableElement, params)
+    }
+
     // Print the json data
     Print.send(params, printFrame)
   }

src/js/raw-html.js

@@ -1,4 +1,5 @@
 import Print from './print'
+import { addHeader, addFooter } from './functions'
 
 export default {
   print: (params, printFrame) => {
@@ -9,6 +10,16 @@ export default {
     // Set our raw html as the printable element inner html content
     params.printableElement.innerHTML = params.printable
 
+    // Add header
+    if (params.header) {
+      addHeader(params.printableElement, params)
+    }
+
+    // Add footer
+    if (params.footer) {
+      addFooter(params.printableElement, params)
+    }
+
     // Print html contents
     Print.send(params, printFrame)
   }

test/manual/index.html

@@ -48,6 +48,8 @@
     function printHtml() {
       printJS({
         printable: 'test',
+        header: 'JSON Print Test',
+        footer: 'JSON Print Footer',
         type: 'html'
       })
     }
@@ -58,6 +60,8 @@
         <p class="blueText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>`,
         type: 'raw-html',
+        header: 'JSON Print Header',
+        footer: 'JSON Print Footer',
         style: '.blueText {color:blue;}'
       })
     }
@@ -106,7 +110,8 @@
           }
         ],
         type: 'json',
-				header: 'JSON Print Test',
+        header: 'JSON Print Test',
+        footer: 'JSON Print Footer',
 				documentTitle: 'Print.js JSON Test'
       })
     }
@@ -181,6 +186,8 @@
           'test-01.jpg',
           'test-02.jpg'
         ],
+        header: 'JSON Print Test',
+        footer: 'JSON Print Footer',
         type: 'image'
       })
     }
@@ -317,4 +324,4 @@ <h2>Form Elements</h2>
       </div>
     </section>
   </body>
-</html>
+</html>