v1.1.0

- Added an option parameter to pass `window` and to overwrite the default styles (see issue #14) - Added support for `<s>` - Updated documentation
Aymkdn · Sep 18, 2019 · d52b43c · d52b43c
1 parent 1ecd44e
commit d52b43c
Show file tree

Hide file tree

Showing 6 changed files with 238 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ var html = htmlToPdfMake(`
       and <u>one with underline</u>. And finally <a href="https://www.somewhere.com">a link</a>.
     </p>
   </div>
-  `);
+`);
 
 /*
 it will return:
@@ -101,17 +101,45 @@ The below HTML tags are supported:
   - BR
   - B / STRONG
   - I / EM
+  - S
   - UL / OL / LI
   - TABLE / THEAD / TBODY / TFOOTER / TR / TH / TD
   - H1 to H6
   - IMG
 
-### Default style
+### Default styles
 
 I've defined some default styles for the supported element.
 
 For example, using a &lt;STRONG&gt; will display the word in **bold**. Or, a link will appear in blue with an underline, and so on...
 
+Here is the list of defaults styles:
+```javascript
+{
+    b: {bold:true},
+    strong: {bold:true},
+    u: {decoration:'underline'},
+    s: {decoration: 'lineThrough'},
+    em: {italics:true},
+    i: {italics:true},
+    h1: {fontSize:24, bold:true, marginBottom:5},
+    h2: {fontSize:22, bold:true, marginBottom:5},
+    h3: {fontSize:20, bold:true, marginBottom:5},
+    h4: {fontSize:18, bold:true, marginBottom:5},
+    h5: {fontSize:16, bold:true, marginBottom:5},
+    h6: {fontSize:14, bold:true, marginBottom:5},
+    a: {color:'blue', decoration:'underline'},
+    strike: {decoration: 'lineThrough'},
+    p: {margin:[0, 5, 0, 10]},
+    ul: {marginBottom:5},
+    li: {marginLeft:5},
+    table: {marginBottom:5},
+    th: {bold:true, fillColor:'#EEEEEE'}
+  }
+```
+
+**Please, note that the above default styles are stronger than the ones defined in the style classes.** Read below how to overwrite them.
+
 ### Customize style
 
 Each converted element will have an associated style-class called `html-tagname`.
@@ -185,6 +213,48 @@ var docDefinition = {
 var pdfDocGenerator = pdfMake.createPdf(docDefinition);
 ```
 
+**Please, note that the default styles are stronger than the ones defined in the style classes.** For example, if you define a class `html-a` to change all links in *purple*, then it won't work because the default styles will overwrite it:
+
+```javascript
+var docDefinition = {
+ content: [
+   html
+ ],
+ styles:{
+   'html-a':{
+     color:'purple' // it won't work: all links will remain 'blue'
+   }
+ }
+};
+
+```
+
+To make it work, you have to either delete the default styles, or change it with a new value. Starting `v1.1.0`, an option parameter is available as a second parameter.
+
+Example: you want `<li>` to not have a margin-left, and `<a>` to be 'purple' and without 'underline' style:
+```javascript
+var html = htmlToPdfMake('<ul><li>this is <a href="...">a link</a></li><li>another item</li><li class="with-margin">3rd item with a margin</li></ul>', {
+  defaultStyles:{ // change the default styles
+    a:{ // for <A>
+      color:'purple', // all links should be 'purple'
+      decoration:'' // remove underline
+    },
+    li:'' // remove all default styles for <LI>
+  }
+});
+
+var docDefinition = {
+ content: [
+   html
+ ],
+ styles:{
+   'with-margin':{
+     marginLeft: 30 // apply a margin with the specific class is used
+   }
+ }
+};
+```
+
 ### `<img>`
 
 The `<img>` tag is supported, however the `src` attribute must already be a **base64 encoded content** (as describe in the [PDFMake documentation](https://pdfmake.github.io/docs/document-definition-object/images/)).
@@ -198,3 +268,7 @@ You can find more examples in [example.js](example.js) which will create [exampl
 ```bash
 node example.js
 ```
+
+## Donate
+
+You can support my work by [making a donation](https://www.paypal.me/aymkdn). Thank you!
diff --git a/example.js b/example.js
@@ -150,7 +150,7 @@ var html = htmlToPdfMake(`
   <p style="text-align: center;"> <span style="font-size: 14px;"><em><strong>Bold italic centered text</strong></em></span> </p>
 
   <span class="a">text "bold" <span class="b">text "bold & italic" <span class="c">text "bold & italic & red"</span> text "bold & italic"</span> text "bold"</span>
-`, window);
+`, {window:window});
 
 var docDefinition = {
   content: [

diff --git a/example.pdf b/example.pdf
diff --git a/index.js b/index.js
@@ -10,23 +10,37 @@
 /**
  * Transform HTML code to a PdfMake object
  * @param  {String} htmlText The HTML code to transform
- * @param  {Object} [window] The `window` object (only used for the tests)
+ * @param  {Object} [options]
+ *   @param  {Object} [defaultStyles] An object with the default styles for each elements
+ *   @param  {Object} [window] The `window` object (only used for the tests)
  * @return {Object} it returns a PdfMake object
  *
  * @example
  * // Some styles are applied by defaults for the supported HTML elements
  * // but you can pass your own styles if you prefer
- * htmlToPdfMake('<div><h1>My Title</h1><p>My paragraph</p></div>')
+ * htmlToPdfMake('<div><h1>My Title</h1><p>My paragraph</p></div>');
+ *
+ * // If you want to overwrite the default styles, e.g. you want <li> to not have a margin-left, and links to be 'purple' and not 'blue', and links without 'underline'
+ * htmlToPdfMake('<ul><li>this is <a href="...">a link</a></li><li>another item</li></ul>', {
+ *   defaultStyles:{
+ *     a:{
+ *       color:'purple',
+ *       decoration:null
+ *     },
+ *     li:null
+ *   }
+ * });
  */
 //var util = require("util"); // to debug
-module.exports = function(htmlText, wndw) {
-  wndw = wndw || window;
+module.exports = function(htmlText, options) {
+  var wndw = (options && options.window ? options.window : window);
 
   // set default styles
   var defaultStyles = {
     b: {bold:true},
     strong: {bold:true},
     u: {decoration:'underline'},
+    s: {decoration: 'lineThrough'},
     em: {italics:true},
     i: {italics:true},
     h1: {fontSize:24, bold:true, marginBottom:5},
@@ -46,6 +60,31 @@ module.exports = function(htmlText, wndw) {
 
   var inlineTags = [ 'p', 'li', 'span', 'strong', 'em', 'b', 'i', 'u' ];
 
+  /**
+   * Permit to change the default styles based on the options
+   * @return {[type]} [description]
+   */
+  function changeDefaultStyles () {
+    for (var keyStyle in options.defaultStyles) {
+      if (defaultStyles.hasOwnProperty(keyStyle)) {
+        // if we want to remove a default style
+        if (options.defaultStyles.hasOwnProperty(keyStyle) && !options.defaultStyles[keyStyle]) {
+          delete defaultStyles[keyStyle];
+        } else {
+          for (var k in options.defaultStyles[keyStyle]) {
+            // if we want to delete a specific property
+            if (!options.defaultStyles[keyStyle][k]) delete defaultStyles[keyStyle][k];
+            else defaultStyles[keyStyle][k] = options.defaultStyles[keyStyle][k];
+          }
+        }
+      }
+    }
+  }
+
+  if (options && options.defaultStyles) {
+    changeDefaultStyles();
+  }
+
   /**
    * Takes an HTML string, converts to HTML using a DOM parser and recursivly parses
    * the content into pdfmake compatible doc definition
@@ -260,7 +299,6 @@ module.exports = function(htmlText, wndw) {
               if (isInlineTag) {
                 applyDefaultStyle(ret, nodeName);
               }
-
               ret.style = ['html-'+nodeName];
             }
           } else if (ret.table || ret.ol || ret.ul) { // for TABLE / UL / OL
@@ -280,6 +318,11 @@ module.exports = function(htmlText, wndw) {
             // apply all the classes not there yet
             ret.style = (ret.style || [])
                         .concat(cssClass.split(' '))
+          }
+
+          // remove doublon in classes
+          if (typeof ret === 'object' && Array.isArray(ret.style)) {
+            ret.style = ret.style
                         .filter(function (value, index, self) {
                           return self.indexOf(value) === index;
                         });