html parser in pdfmake.js

by Martin Murciego

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<div id="container">
   <table>
         <tr>
            <td colspan="2"><b>Standing costs</b><br><i>Costs that don't depend on the travelled distance and one must pay even if the car is always stopped</i></td>
         </tr>
         <tr>
            <td><b>Costs</b></td>
            <td><b>Monthly amount</b></td>
         </tr>
         <tr>
            <td><b>Depreciation of the vehicle</b>&nbsp;&nbsp;<br>Acquisition value: 20000£<br>Value today: 10000£<br>Period of possession: 200 months<br>(20000£-10000£)/200 months&nbsp;</td>
            <td>50.0</td>
         </tr>
         <tr>
            <td><b>Vehicle insurance and Breakdown cover</b><br>200 Pounds per semester</td>
            <td>33.3</td>
         </tr>
         <tr>
            <td><b>Loan interests</b>&nbsp;&nbsp;&nbsp;</td>
            <td>0.0</td>
         </tr>
         <tr>
            <td><b>Vehicle inspection (MOT test)</b><br>0 times costing 36 £ each one during 200 months&nbsp;</td>
            <td>0.0</td>
         </tr>
         <tr>
            <td><b>Vehicle Excise Duty (Car tax)</b><br>50 Pounds per year</td>
            <td>4.2</td>
         </tr>
         <tr>
            <td><b>1/2 Maintenance</b><br>300 Pounds per year</td>
            <td>12.5</td>
         </tr>
         <tr>
            <td><b>TOTAL - Standing costs</b></td>
            <td><b>100/month</b></td>
         </tr>
   </table>
</div>

<hr>
<hr>

<input type="button" value="Download PDF" onclick="onClick()">

JavaScript

function onClick(){
	pdfForElement('container').download();
}

function pdfForElement(id) {
  function ParseContainer(cnt, e, p, styles) {
    var elements = [];
    var children = e.childNodes;
    if (children.length != 0) {
      for (var i = 0; i < children.length; i++) p = ParseElement(elements, children[i], p, styles);
    }
    if (elements.length != 0) {
      for (var i = 0; i < elements.length; i++) cnt.push(elements[i]);
    }
    return p;
  }

  function ComputeStyle(o, styles) {
    for (var i = 0; i < styles.length; i++) {
      var st = styles[i].trim().toLowerCase().split(":");
      if (st.length == 2) {
        switch (st[0]) {
          case "font-size":
            {
              o.fontSize = parseInt(st[1]);
              break;
            }
          case "text-align":
            {
              switch (st[1]) {
                case "right":
                  o.alignment = 'right';
                  break;
                case "center":
                  o.alignment = 'center';
                  break;
              }
              break;
            }
          case "font-weight":
            {
              switch (st[1]) {
                case "bold":
                  o.bold = true;
                  break;
              }
              break;
            }
          case "text-decoration":
            {
              switch (st[1]) {
                case "underline":
                  o.decoration = "underline";
                  break;
              }
              break;
            }
          case "font-style":
            {
              switch (st[1]) {
                case "italic":
                  o.italics = true;
                  break;
              }
              break;
            }
        }
      }
    }
  }

  function ParseElement(cnt, e, p, styles) {
    if (!styles) styles = [];
    if (e.getAttribute) {
      var nodeStyle = e.getAttribute("style");
      if (nodeStyle) {
        var ns =...