v2.5.23

improve color support for borders

Author: Aymkdn

browser.js

@@ -116,7 +116,7 @@ <h1>HTML to PDFMake convertor</h1>
       <div id="pdf_ie" style="display:none;padding:3em">The PDF file is sent to you for download. Use a modern browser (like Chrome or Firefox) to display the PDF in this page.</div>
     </div>
   </div>
-  <script src="browser-2.5.22.js"></script>
+  <script src="browser-2.5.23.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.js"></script>
   <script>

docs/browser-2.5.22.js renamed to docs/browser-2.5.23.js

@@ -945,7 +945,7 @@ function htmlToPdfMake(htmlText, options) {
         // otherwise we could have 'border-color' or 'border-width'
         else if (b.key === 'border-color') {
           properties = _this.topRightBottomLeftToObject(b.value);
-          borderColor = [ properties.left, properties.top, properties.right, properties.bottom ];
+          borderColor = [ _this.parseColor(properties.left).color, _this.parseColor(properties.top).color, _this.parseColor(properties.right).color, _this.parseColor(properties.bottom).color ];
         }
         else if (b.key === 'border-width') {
           properties = _this.topRightBottomLeftToObject(b.value);
@@ -975,41 +975,26 @@ function htmlToPdfMake(htmlText, options) {
   //
   // to an object that gives {top, right, bottom, left}
   this.topRightBottomLeftToObject = function(props) {
-    var splitProps = String(props).split(' ');
-    switch (splitProps.length) {
-      case 4: {
-        return {
-          top:splitProps[0],
-          right:splitProps[1],
-          bottom:splitProps[2],
-          left:splitProps[3]
-        }
-      }
-      case 3: {
-        return {
-          top:splitProps[0],
-          right:splitProps[1],
-          left:splitProps[1],
-          bottom:splitProps[2],
-        }
-      }
-      case 2: {
-        return {
-          top:splitProps[0],
-          bottom:splitProps[0],
-          right:splitProps[1],
-          left:splitProps[1]
-        }
-      }
-      case 1: {
-        return {
-          top:splitProps[0],
-          right:splitProps[0],
-          bottom:splitProps[0],
-          left:splitProps[0]
-        }
-      }
+    // regexp to capture the colors (hex, rgb, rgba, hsl, hsla, color name)
+    var colorRegex = /#[0-9a-fA-F]{3,6}|\b(?:rgba?|hsla?)\([^)]*\)|\b[a-zA-Z]+\b/g;
+    var colors = props.match(colorRegex) || [];
+
+    var top=colors[0], right=colors[1], bottom=colors[2], left=colors[3];
+
+    switch (colors.length) {
+      case 1:
+        right = bottom = left = top;
+        break;
+      case 2:
+        bottom = top;
+        left = right;
+        break;
+      case 3:
+        left = right;
+        break;
     }
+
+    return { top:top, right:right, bottom:bottom, left:left };
   }
 
   // input: h in [0,360] and s,v in [0,1] - output: "rgb(0–255,0–255,0–255)""

docs/index.html

@@ -1,6 +1,6 @@
 {
   "name": "html-to-pdfmake",
-  "version": "2.5.22",
+  "version": "2.5.23",
   "description": "Convert HTML code to PDFMake",
   "main": "index.js",
   "scripts": {

example.pdf

@@ -1250,19 +1250,20 @@ test("unit tests", function(t) {
   });
 
   t.test("borders",function(t) {
-    var html = `<table><tr><td style="border:1px solid red">border:1px solid red</td><td style="border-bottom:1px solid blue">border-bottom:1px solid blue</td><td style="border-top-color:green">border-top-color:green</td><td style="border-right-width:0px">border-right-width:0px</td></tr></table>`;
+    var html = `<table><tr><td style="border:1px solid red">border:1px solid red</td><td style="border-bottom:1px solid blue">border-bottom:1px solid blue</td><td style="border-top-color:green">border-top-color:green</td><td style="border-right-width:0px">border-right-width:0px</td><td style="border-color:rgb(255, 0, 0) blue green">border-color:rgb(255, 0, 0) blue green</td></tr></table>`;
     var ret = htmlToPdfMake(html, {
       window:window
     });
     if (debug) console.log(JSON.stringify(ret));
     t.check(Array.isArray(ret) && ret.length===1, "return is OK");
     ret = ret[0];
-    t.check(Array.isArray(ret.table.body) && ret.table.body[0].length === 4, "table array OK");
+    t.check(Array.isArray(ret.table.body) && ret.table.body[0].length === 5, "table array OK");
     ret = ret.table.body[0];
     t.check(ret[0].text === "border:1px solid red" && JSON.stringify(ret[0].border) === '[true,true,true,true]' && JSON.stringify(ret[0].borderColor) === '["red","red","red","red"]', "border:1px solid red");
     t.check(ret[1].text === "border-bottom:1px solid blue" && JSON.stringify(ret[1].border) === '[true,true,true,true]' && JSON.stringify(ret[1].borderColor) === '["#000000","#000000","#000000","blue"]', "border-bottom:1px solid blue");
     t.check(ret[2].text === "border-top-color:green" && JSON.stringify(ret[2].borderColor) === '["#000000","green","#000000","#000000"]', "border-top-color:green");
     t.check(ret[3].text === "border-right-width:0px" && JSON.stringify(ret[3].border) === '[true,true,false,true]', "border-right-width:0px");
+    t.check(ret[4].text === "border-color:rgb(255, 0, 0) blue green" && JSON.stringify(ret[4].borderColor) === '["blue","#ff0000","blue","green"]', "border-color:rgb(255, 0, 0) blue green");
 
     t.finish();
   });