Initial commit

Author: Rajeev Ranjan

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    ["@babel/plugin-transform-runtime", {
+      "corejs": false
+    }],
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+/dist

.npmignore

@@ -0,0 +1,6 @@
+index.html
+test.png
+content.jpg
+webpack.config.js
+/app/
+.babelrc

README.md

@@ -0,0 +1,47 @@
+# print-html-to-pdf
+
+Print HTML to pdf using jsPDF & dom-to-image.
+
+## Install
+
+```
+npm i print-html-to-pdf
+```
+
+## print html to pdf example
+
+```html
+<button id="print-button">Print</button>
+<div id="print-me">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit
+    amet laoreet urna, eu convallis arcu. Etiam eget risus nec justo ultricies
+    lobortis. Sed vehicula quam tellus, non porttitor felis pulvinar eget.
+    Integer ac porttitor diam. Donec ultrices vel ex et scelerisque. Ut
+    vulputate dolor nulla, vitae viverra tortor eleifend ut. Suspendisse
+    potenti. In sagittis est non lectus blandit, non tempus erat maximus.
+    Vestibulum id enim dignissim, viverra purus sed, finibus ex. Praesent quis
+    consectetur est. Cras ac erat auctor, egestas magna et, gravida tellus.
+    Phasellus non posuere tortor.
+  </p>
+</div>
+```
+
+```js
+import printHtmlToPDF from "print-html-to-pdf";
+
+const printButton = document.getElementById("print-button");
+printButton.addEventListener("click", async (event) => {
+  const node = document.getElementById("print-me");
+  const jsPDFOption = {
+    jsPDF: {
+      format: "a4",
+    },
+  };
+  await printHtmlToPDF.print(node, jsPDFOption);
+});
+```
+
+### - jsPDF
+
+please ref to [JSPDF Documentation](http://raw.githack.com/MrRio/jsPDF/master/docs/) for more option

app/print-html-to-pdf.js

@@ -0,0 +1,79 @@
+'use strict';
+
+import { jsPDF } from 'jspdf';
+import domtoimage from 'dom-to-image';
+import _ from 'lodash';
+import spinner from './spinner';
+class PrintHtmlToPDF {
+
+  // Constructor
+  constructor() {
+    this.__init();
+  };
+
+  /*
+   Print give html node to pdf
+   @params:
+         : node is dom element
+         : default option is defaultOption = {
+     jsPDF: {
+       unit: 'px',
+       format: 'a4',
+     }
+   };
+ */
+  print = async (node, option = {}) => {
+    option = _.merge(this.defaultOption, option);
+    const fileName = "default";
+    if (fileName === 'closed') {
+      return;
+    }
+    spinner.spin();
+
+    const dataUrl = await this.__htmlToImageDataUrl(node, spinner);
+    const pdf = new jsPDF(option.jsPDF);
+    const pdfWidth = pdf.internal.pageSize.getWidth();
+    const pdfHeight = pdf.internal.pageSize.getHeight();
+    const imgProps = pdf.getImageProperties(dataUrl);
+    const imgHeight = pdfWidth / imgProps.width * imgProps.height;
+    pdf.addImage(dataUrl, option.imageType, 0, 0, pdfWidth, imgHeight);
+    await pdf.save(fileName, { returnPromise: true });
+    spinner.stop();
+
+  }
+
+  // Initialize the basic needs
+  __init = () => {
+    this.defaultOption = {
+      jsPDF: {
+        unit: 'px',
+        format: 'a4',
+      },
+      imageType: 'image/png',
+      filename: 'print-html-to-pdf.pdf',
+    };
+  };
+
+  // Initialize the modal
+  __initializePrintModalPopup = async () => {
+
+  };
+
+  // Convert html to png image
+  __htmlToImageDataUrl = async (node, spinner) => {
+    return new Promise((resolve, reject) => {
+      domtoimage.toPng(node)
+        .then(function (dataUrl) {
+          resolve(dataUrl);
+        })
+        .catch(function (error) {
+          console.error('printHtmlToPDF', error);
+          spinner.stop();
+          reject(error);
+        });
+    });
+  }
+
+};
+
+export default new PrintHtmlToPDF();

app/spinner.js

@@ -0,0 +1,53 @@
+'use strict';
+
+class Spinner {
+    constructor() {
+        this.__init();
+    }
+
+    // Spin the spinner
+    spin = () => {
+        if (document.getElementById(this.spinnerId) === null || document.getElementById(this.spinnerId) === undefined) {
+            document.body.appendChild(this.spinnerDiv);
+        };
+        const spinner = document.getElementById(this.spinnerId);
+        this.spinnerDiv.style.height = `${document.body.scrollHeight}px`;
+        this.spinnerDiv.style.display = "block";
+    };
+
+    // Spin the spinner
+    stop = () => {
+        if (document.getElementById(this.spinnerId) !== null) {
+            const spinner = document.getElementById(this.spinnerId);
+            this.spinnerDiv.style.display = "none";
+        }
+    };
+
+    // Initialize the basic needs
+    __init = () => {
+        this.spinnerId = 'print-html-to-pdf-spinner-div';
+        this.__initSpinner();
+    };
+
+    // Initialize the spinner
+    __initSpinner = () => {
+        this.spinnerDiv = document.createElement('div');
+        this.spinnerDiv.id = this.spinnerId;
+
+        this.spinnerDiv.style.position = "absolute";
+        this.spinnerDiv.style.zIndex = "99999999";
+        this.spinnerDiv.style.top = "0";
+        this.spinnerDiv.style.left = "0";
+        this.spinnerDiv.style.width = "100%";
+        this.spinnerDiv.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
+        this.spinnerDiv.style.display = "none";
+
+        const spinnerImage = document.createElement('img');
+        spinnerImage.style = "position: absolute; margin: 100px auto auto auto; inset: 0px;";
+        spinnerImage.alt = "Printing pdf......";
+        spinnerImage.src = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' width='64px' height='64px' viewBox='0 0 128 128' xml:space='preserve'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='%23FFFFFF' /%3E%3Cg%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%23000000'/%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%23cccccc' transform='rotate(30 64 64)'/%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%23cccccc' transform='rotate(60 64 64)'/%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%23cccccc' transform='rotate(90 64 64)'/%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%23cccccc' transform='rotate(120 64 64)'/%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%23b2b2b2' transform='rotate(150 64 64)'/%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%23999999' transform='rotate(180 64 64)'/%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%237f7f7f' transform='rotate(210 64 64)'/%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%23666666' transform='rotate(240 64 64)'/%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%234c4c4c' transform='rotate(270 64 64)'/%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%23333333' transform='rotate(300 64 64)'/%3E%3Cpath d='M59.6 0h8v40h-8V0z' fill='%23191919' transform='rotate(330 64 64)'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64' calcMode='discrete' dur='1080ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E";
+        this.spinnerDiv.appendChild(spinnerImage);
+    };
+};
+
+export default new Spinner();

index.js

@@ -0,0 +1,2 @@
+const printHtmlToPDF = require('./dist/print-html-to-pdf.min');
+module.exports = printHtmlToPDF;