printjs-rpk 1.6.0

package/src/js/init.js

@@ -0,0 +1,169 @@
+'use strict'
+
+import Browser from './browser'
+import Modal from './modal'
+import Pdf from './pdf'
+import Html from './html'
+import RawHtml from './raw-html'
+import Image from './image'
+import Json from './json'
+
+const printTypes = ['pdf', 'html', 'image', 'json', 'raw-html']
+
+export default {
+  init () {
+    const params = {
+      printable: null,
+      fallbackPrintable: null,
+      type: 'pdf',
+      header: null,
+      headerStyle: 'font-weight: 300;',
+      maxWidth: 800,
+      properties: null,
+      gridHeaderStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',
+      gridStyle: 'border: 1px solid lightgray; margin-bottom: -1px;',
+      showModal: false,
+      onError: (error) => { throw error },
+      onLoadingStart: null,
+      onLoadingEnd: null,
+      onPrintDialogClose: () => {},
+      onIncompatibleBrowser: () => {},
+      modalMessage: 'Retrieving Document...',
+      frameId: 'printJS',
+      frameRemoveDelay: null,
+      printableElement: null,
+      documentTitle: 'Document',
+      targetStyle: ['clear', 'display', 'width', 'min-width', 'height', 'min-height', 'max-height'],
+      targetStyles: ['border', 'box', 'break', 'text-decoration'],
+      ignoreElements: [],
+      repeatTableHeader: true,
+      css: null,
+      style: null,
+      scanStyles: true,
+      base64: false,
+
+      // Deprecated
+      onPdfOpen: null,
+      font: 'TimesNewRoman',
+      font_size: '12pt',
+      honorMarginPadding: true,
+      honorColor: false,
+      imageStyle: 'max-width: 100%;'
+    }
+
+    // Check if a printable document or object was supplied
+    const args = arguments[0]
+    if (args === undefined) {
+      throw new Error('printJS expects at least 1 attribute.')
+    }
+
+    // Process parameters
+    switch (typeof args) {
+      case 'string':
+        params.printable = encodeURI(args)
+        params.fallbackPrintable = params.printable
+        params.type = arguments[1] || params.type
+        break
+      case 'object':
+        params.printable = args.printable
+        params.fallbackPrintable = typeof args.fallbackPrintable !== 'undefined' ? args.fallbackPrintable : params.printable
+        params.fallbackPrintable = params.base64 ? `data:application/pdf;base64,${params.fallbackPrintable}` : params.fallbackPrintable
+        for (var k in params) {
+          if (k === 'printable' || k === 'fallbackPrintable') continue
+
+          params[k] = typeof args[k] !== 'undefined' ? args[k] : params[k]
+        }
+        break
+      default:
+        throw new Error('Unexpected argument type! Expected "string" or "object", got ' + typeof args)
+    }
+
+    // Validate printable
+    if (!params.printable) throw new Error('Missing printable information.')
+
+    // Validate type
+    if (!params.type || typeof params.type !== 'string' || printTypes.indexOf(params.type.toLowerCase()) === -1) {
+      throw new Error('Invalid print type. Available types are: pdf, html, image and json.')
+    }
+
+    // Check if we are showing a feedback message to the user (useful for large files)
+    if (params.showModal) Modal.show(params)
+
+    // Check for a print start hook function
+    if (params.onLoadingStart) params.onLoadingStart()
+
+    // To prevent duplication and issues, remove any used printFrame from the DOM
+    const usedFrame = document.getElementById(params.frameId)
+
+    if (usedFrame) usedFrame.parentNode.removeChild(usedFrame)
+
+    // Create a new iframe for the print job
+    const printFrame = document.createElement('iframe')
+
+    if (Browser.isFirefox()) {
+      // Set the iframe to be is visible on the page (guaranteed by fixed position) but hidden using opacity 0, because
+      // this works in Firefox. The height needs to be sufficient for some part of the document other than the PDF
+      // viewer's toolbar to be visible in the page
+      printFrame.setAttribute('style', 'width: 1px; height: 100px; position: fixed; left: 0; top: 0; opacity: 0; border-width: 0; margin: 0; padding: 0')
+    } else {
+      // Hide the iframe in other browsers
+      printFrame.setAttribute('style', 'visibility: hidden; height: 0; width: 0; position: absolute; border: 0')
+    }
+
+    // Set iframe element id
+    printFrame.setAttribute('id', params.frameId)
+
+    // For non pdf printing, pass an html document string to srcdoc (force onload callback)
+    if (params.type !== 'pdf') {
+      printFrame.srcdoc = '<html><head><title>' + params.documentTitle + '</title>'
+
+      // Attach css files
+      if (params.css) {
+        // Add support for single file
+        if (!Array.isArray(params.css)) params.css = [params.css]
+
+        // Create link tags for each css file
+        params.css.forEach(file => {
+          printFrame.srcdoc += '<link rel="stylesheet" href="' + file + '">'
+        })
+      }
+
+      printFrame.srcdoc += '</head><body></body></html>'
+    }
+
+    // Check printable type
+    switch (params.type) {
+      case 'pdf':
+        // Check browser support for pdf and if not supported we will just open the pdf file instead
+        if (Browser.isIE()) {
+          try {
+            console.info('Print.js doesn\'t support PDF printing in Internet Explorer.')
+            const win = window.open(params.fallbackPrintable, '_blank')
+            win.focus()
+            params.onIncompatibleBrowser()
+          } catch (error) {
+            params.onError(error)
+          } finally {
+            // Make sure there is no loading modal opened
+            if (params.showModal) Modal.close()
+            if (params.onLoadingEnd) params.onLoadingEnd()
+          }
+        } else {
+          Pdf.print(params, printFrame)
+        }
+        break
+      case 'image':
+        Image.print(params, printFrame)
+        break
+      case 'html':
+        Html.print(params, printFrame)
+        break
+      case 'raw-html':
+        RawHtml.print(params, printFrame)
+        break
+      case 'json':
+        Json.print(params, printFrame)
+        break
+    }
+  }
+}

package/src/js/json.js

@@ -0,0 +1,109 @@
+import { capitalizePrint, addHeader } from './functions'
+import Print from './print'
+
+export default {
+  print: (params, printFrame) => {
+    // Check if we received proper data
+    if (typeof params.printable !== 'object') {
+      throw new Error('Invalid javascript data object (JSON).')
+    }
+
+    // Validate repeatTableHeader
+    if (typeof params.repeatTableHeader !== 'boolean') {
+      throw new Error('Invalid value for repeatTableHeader attribute (JSON).')
+    }
+
+    // Validate properties
+    if (!params.properties || !Array.isArray(params.properties)) {
+      throw new Error('Invalid properties array for your JSON data.')
+    }
+
+    // We will format the property objects to keep the JSON api compatible with older releases
+    params.properties = params.properties.map(property => {
+      return {
+        field: typeof property === 'object' ? property.field : property,
+        displayName: typeof property === 'object' ? property.displayName : property,
+        columnSize: typeof property === 'object' && property.columnSize ? property.columnSize + ';' : 100 / params.properties.length + '%;'
+      }
+    })
+
+    // Create a print container element
+    params.printableElement = document.createElement('div')
+
+    // Check if we are adding a print header
+    if (params.header) {
+      addHeader(params.printableElement, params)
+    }
+
+    // Build the printable html data
+    params.printableElement.innerHTML += jsonToHTML(params)
+
+    // Print the json data
+    Print.send(params, printFrame)
+  }
+}
+
+function jsonToHTML (params) {
+  // Get the row and column data
+  const data = params.printable
+  const properties = params.properties
+
+  // Create a html table
+  let htmlData = '<table style="border-collapse: collapse; width: 100%;">'
+
+  // Check if the header should be repeated
+  if (params.repeatTableHeader) {
+    htmlData += '<thead>'
+  }
+
+  // Add the table header row
+  htmlData += '<tr>'
+
+  // Add the table header columns
+  for (let a = 0; a < properties.length; a++) {
+    htmlData += '<th style="width:' + properties[a].columnSize + ';' + params.gridHeaderStyle + '">' + capitalizePrint(properties[a].displayName) + '</th>'
+  }
+
+  // Add the closing tag for the table header row
+  htmlData += '</tr>'
+
+  // If the table header is marked as repeated, add the closing tag
+  if (params.repeatTableHeader) {
+    htmlData += '</thead>'
+  }
+
+  // Create the table body
+  htmlData += '<tbody>'
+
+  // Add the table data rows
+  for (let i = 0; i < data.length; i++) {
+    // Add the row starting tag
+    htmlData += '<tr>'
+
+    // Print selected properties only
+    for (let n = 0; n < properties.length; n++) {
+      let stringData = data[i]
+
+      // Support nested objects
+      const property = properties[n].field.split('.')
+      if (property.length > 1) {
+        for (let p = 0; p < property.length; p++) {
+          stringData = stringData[property[p]]
+        }
+      } else {
+        stringData = stringData[properties[n].field]
+      }
+
+      // Add the row contents and styles
+      htmlData += '<td style="width:' + properties[n].columnSize + params.gridStyle + '">' + stringData + '</td>'
+    }
+
+    // Add the row closing tag
+    htmlData += '</tr>'
+  }
+
+  // Add the table and body closing tags
+  htmlData += '</tbody></table>'
+
+  return htmlData
+}

package/src/js/modal.js

@@ -0,0 +1,62 @@
+const Modal = {
+  show (params) {
+    // Build modal
+    const modalStyle = 'font-family:sans-serif; ' +
+        'display:table; ' +
+        'text-align:center; ' +
+        'font-weight:300; ' +
+        'font-size:30px; ' +
+        'left:0; top:0;' +
+        'position:fixed; ' +
+        'z-index: 9990;' +
+        'color: #0460B5; ' +
+        'width: 100%; ' +
+        'height: 100%; ' +
+        'background-color:rgba(255,255,255,.9);' +
+        'transition: opacity .3s ease;'
+
+    // Create wrapper
+    const printModal = document.createElement('div')
+    printModal.setAttribute('style', modalStyle)
+    printModal.setAttribute('id', 'printJS-Modal')
+
+    // Create content div
+    const contentDiv = document.createElement('div')
+    contentDiv.setAttribute('style', 'display:table-cell; vertical-align:middle; padding-bottom:100px;')
+
+    // Add close button (requires print.css)
+    const closeButton = document.createElement('div')
+    closeButton.setAttribute('class', 'printClose')
+    closeButton.setAttribute('id', 'printClose')
+    contentDiv.appendChild(closeButton)
+
+    // Add spinner (requires print.css)
+    const spinner = document.createElement('span')
+    spinner.setAttribute('class', 'printSpinner')
+    contentDiv.appendChild(spinner)
+
+    // Add message
+    const messageNode = document.createTextNode(params.modalMessage)
+    contentDiv.appendChild(messageNode)
+
+    // Add contentDiv to printModal
+    printModal.appendChild(contentDiv)
+
+    // Append print modal element to document body
+    document.getElementsByTagName('body')[0].appendChild(printModal)
+
+    // Add event listener to close button
+    document.getElementById('printClose').addEventListener('click', function () {
+      Modal.close()
+    })
+  },
+  close () {
+    const printModal = document.getElementById('printJS-Modal')
+
+    if (printModal) {
+      printModal.parentNode.removeChild(printModal)
+    }
+  }
+}
+
+export default Modal

package/src/js/pdf.js

@@ -0,0 +1,57 @@
+import Print from './print'
+import { cleanUp } from './functions'
+
+export default {
+  print: (params, printFrame) => {
+    // Check if we have base64 data
+    if (params.base64) {
+      const bytesArray = Uint8Array.from(atob(params.printable), c => c.charCodeAt(0))
+      createBlobAndPrint(params, printFrame, bytesArray)
+      return
+    }
+
+    // Format pdf url
+    params.printable = /^(blob|http|\/\/)/i.test(params.printable)
+      ? params.printable
+      : window.location.origin + (params.printable.charAt(0) !== '/' ? '/' + params.printable : params.printable)
+
+    // Get the file through a http request (Preload)
+    const req = new window.XMLHttpRequest()
+    req.responseType = 'arraybuffer'
+
+    req.addEventListener('error', () => {
+      cleanUp(params)
+      params.onError(req.statusText, req)
+
+      // Since we don't have a pdf document available, we will stop the print job
+    })
+
+    req.addEventListener('load', () => {
+      // Check for errors
+      if ([200, 201].indexOf(req.status) === -1) {
+        cleanUp(params)
+        params.onError(req.statusText, req)
+
+        // Since we don't have a pdf document available, we will stop the print job
+        return
+      }
+
+      // Print requested document
+      createBlobAndPrint(params, printFrame, req.response)
+    })
+
+    req.open('GET', params.printable, true)
+    req.send()
+  }
+}
+
+function createBlobAndPrint (params, printFrame, data) {
+  // Pass response or base64 data to a blob and create a local object url
+  let localPdf = new window.Blob([data], { type: 'application/pdf' })
+  localPdf = window.URL.createObjectURL(localPdf)
+
+  // Set iframe src with pdf document url
+  printFrame.setAttribute('src', localPdf)
+
+  Print.send(params, printFrame)
+}

package/src/js/print.js

@@ -0,0 +1,102 @@
+import Browser from './browser'
+import { cleanUp } from './functions'
+
+const Print = {
+  send: (params, printFrame) => {
+    // Append iframe element to document body
+    document.getElementsByTagName('body')[0].appendChild(printFrame)
+
+    // Get iframe element
+    const iframeElement = document.getElementById(params.frameId)
+
+    // Wait for iframe to load all content
+    iframeElement.onload = () => {
+      if (params.type === 'pdf') {
+        // Add a delay for Firefox. In my tests, 1000ms was sufficient but 100ms was not
+        if (Browser.isFirefox()) {
+          setTimeout(() => performPrint(iframeElement, params), 1000)
+        } else {
+          performPrint(iframeElement, params)
+        }
+        return
+      }
+
+      // Get iframe element document
+      let printDocument = (iframeElement.contentWindow || iframeElement.contentDocument)
+      if (printDocument.document) printDocument = printDocument.document
+
+      // Append printable element to the iframe body
+      printDocument.body.appendChild(params.printableElement)
+
+      // Add custom style
+      if (params.type !== 'pdf' && params.style) {
+        // Create style element
+        const style = document.createElement('style')
+        style.innerHTML = params.style
+
+        // Append style element to iframe's head
+        printDocument.head.appendChild(style)
+      }
+
+      // If printing images, wait for them to load inside the iframe
+      const images = printDocument.getElementsByTagName('img')
+
+      if (images.length > 0) {
+        loadIframeImages(Array.from(images)).then(() => performPrint(iframeElement, params))
+      } else {
+        performPrint(iframeElement, params)
+      }
+    }
+  }
+}
+
+function performPrint (iframeElement, params) {
+  try {
+    iframeElement.focus()
+
+    // If Edge or IE, try catch with execCommand
+    if (Browser.isEdge() || Browser.isIE()) {
+      try {
+        iframeElement.contentWindow.document.execCommand('print', false, null)
+      } catch (e) {
+        iframeElement.contentWindow.print()
+      }
+    } else {
+      // Other browsers
+      iframeElement.contentWindow.print()
+    }
+  } catch (error) {
+    params.onError(error)
+  } finally {
+    if (Browser.isFirefox()) {
+      // Move the iframe element off-screen and make it invisible
+      iframeElement.style.visibility = 'hidden'
+      iframeElement.style.left = '-1px'
+    }
+
+    cleanUp(params)
+  }
+}
+
+function loadIframeImages (images) {
+  const promises = images.map(image => {
+    if (image.src && image.src !== window.location.href) {
+      return loadIframeImage(image)
+    }
+  })
+
+  return Promise.all(promises)
+}
+
+function loadIframeImage (image) {
+  return new Promise(resolve => {
+    const pollImage = () => {
+      !image || typeof image.naturalWidth === 'undefined' || image.naturalWidth === 0 || !image.complete
+        ? setTimeout(pollImage, 500)
+        : resolve()
+    }
+    pollImage()
+  })
+}
+
+export default Print

package/src/js/raw-html.js

@@ -0,0 +1,15 @@
+import Print from './print'
+
+export default {
+  print: (params, printFrame) => {
+    // Create printable element (container)
+    params.printableElement = document.createElement('div')
+    params.printableElement.setAttribute('style', 'width:100%')
+
+    // Set our raw html as the printable element inner html content
+    params.printableElement.innerHTML = params.printable
+
+    // Print html contents
+    Print.send(params, printFrame)
+  }
+}

package/src/sass/index.scss

@@ -0,0 +1,14 @@
+/*
+|--------------------------------------------------------------------------
+| Modules
+|--------------------------------------------------------------------------
+*/
+@import './modules/colors';
+
+/*
+|--------------------------------------------------------------------------
+| Partials
+|--------------------------------------------------------------------------
+*/
+@import './partials/modal';
+@import './partials/spinner';

package/src/sass/modules/_colors.scss

@@ -0,0 +1,10 @@
+$blue: hsl(209, 96%, 36%);
+$white: hsl(0, 0%, 100%);
+
+/*
+|--------------------------------------------------------------------------
+| Aliases
+|--------------------------------------------------------------------------
+*/
+$primary: $blue;
+$bg-color: rgba($white, .9);

package/src/sass/partials/_modal.scss

@@ -0,0 +1,41 @@
+.printModal {
+  font-family:sans-serif;
+  display:flex;
+  text-align:center;
+  font-weight:300;
+  font-size:30px;
+  left:0;
+  top:0;
+  position:absolute;
+  color: $primary;
+  width: 100%;
+  height: 100%;
+  background-color: $bg-color;
+}
+
+/*
+|--------------------------------------------------------------------------
+| Close Button
+|--------------------------------------------------------------------------
+*/
+.printClose {
+  position:absolute;
+  right:10px;
+  top:10px;
+}
+
+.printClose:before {
+  content: "\00D7";
+  font-family: "Helvetica Neue", sans-serif;
+  font-weight: 100;
+  line-height: 1px;
+  padding-top: 0.5em;
+  display: block;
+  font-size: 2em;
+  text-indent: 1px;
+  overflow: hidden;
+  height: 1.25em;
+  width: 1.25em;
+  text-align: center;
+  cursor: pointer;
+}

package/src/sass/partials/_spinner.scss

@@ -0,0 +1,46 @@
+.printSpinner {
+  margin-top: 3px;
+  margin-left: -40px;
+  position: absolute;
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+	border: 2px solid $primary;
+  border-radius: 50%;
+  animation: spin 0.75s infinite linear;
+}
+
+.printSpinner::before, .printSpinner::after {
+  left: -2px;
+  top: -2px;
+  display: none;
+  position: absolute;
+  content: '';
+  width: inherit;
+  height: inherit;
+  border: inherit;
+  border-radius: inherit;
+}
+
+.printSpinner, .printSpinner::before, .printSpinner::after {
+  display: inline-block;
+  border-color: transparent;
+  border-top-color: $primary;
+  animation-duration: 1.2s;
+}
+.printSpinner::before {
+  transform: rotate(120deg);
+}
+.printSpinner::after {
+  transform: rotate(240deg);
+}
+
+/* Keyframes for the animation */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}