v2.3.0

See #109

README.md

@@ -144,6 +144,40 @@ If you use Node, then you'll have to pass the `window` object ([see below](https
 
 You can overwrite the default styles using `defaultStyles` ([see below](https://github.com/Aymkdn/html-to-pdfmake#default-styles)).
 
+#### `imagesByReference`
+
+If you're using `html-to-pdfmake` in a web browser with images, then you can set this option to `true` and it will automatically load your images in your PDF using the [`{images}` option of PDFMake](https://pdfmake.github.io/docs/document-definition-object/images/).
+
+Using this option will change the output of `html-to-pdfmake` that will return an object with `{content, images}`.
+
+Example:
+```javascript
+var ret = htmlToPdfmake(`<img src="https://picsum.photos/seed/picsum/200">`, {
+  imagesByReference:true
+});
+// 'ret' contains:
+//  {
+//    "content":[
+//      [
+//        {
+//          "nodeName":"IMG",
+//          "image":"img_ref_0",
+//          "style":["html-img"]
+//        }
+//      ]
+//    ],
+//    "images":{
+//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
+//    }
+//  }
+
+var dd = {
+  content:ret.content,
+  images:ret.images
+}
+pdfMake.createPdf(dd).download();
+```
+
 #### `fontSizes`
 
 You can overwrite the default sizes for the old HTML4 tag `<font>` by using `fontSizes`. It must be an array with 7 values ([see below](https://github.com/Aymkdn/html-to-pdfmake#default-styles)).
@@ -402,26 +436,11 @@ Examples:
 
 ### `<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/)) or a reference (starting from PDFMake 0.1.67).
-
-You can check [this Stackoverflow question](https://stackoverflow.com/questions/934012/get-image-data-in-javascript/42916772#42916772) to know the different ways to get a base64 encoded content from an image.
+If you use `html-to-pdfmake` **in a Web browser**, then you could just pass [the option `imagesByReference`](https://github.com/Aymkdn/html-to-pdfmake#imagesbyreference) with the value `true` and the images will be passed by references (starting from PDFMake v0.1.67).
 
-If you want to use the **reference**, just put a name as the `src` of your image, and add the `images` property:
-```js
-var html = htmlToPdfmake(`<img src="my_ref"> <img src="https://picsum.photos/seed/picsum/200/300">`);
-var docDefinition = {
-  content: [
-    html
-  ],
-  images:{
-    "my_ref":"https://picsum.photos/200",
-     // it works also using the url as the reference name
-    "https://picsum.photos/seed/picsum/200/300":"https://picsum.photos/seed/picsum/200/300"
-  }
-};
-```
+Otherwise the `src` attribute must be a **base64 encoded content** (as describe in the [PDFMake documentation](https://pdfmake.github.io/docs/document-definition-object/images/)) or a reference ([see more here](https://github.com/Aymkdn/html-to-pdfmake/issues/109#issue-932953144)).
 
-To know more, check the [PDFMake documentation](https://pdfmake.github.io/docs/0.1/document-definition-object/images/) and look at [this issue](https://github.com/Aymkdn/html-to-pdfmake/issues/109#issue-932953144).
+You can check [this Stackoverflow question](https://stackoverflow.com/questions/934012/get-image-data-in-javascript/42916772#42916772) to know the different ways to get a base64 encoded content from an image.
 
 ### page break
 

index.js

@@ -13,6 +13,7 @@
  * @param  {Object} [options]
  *   @param  {Object} [defaultStyles] An object with the default styles for each elements
  *   @param  {Boolean} [tableAutoSize=false] It permits to use the width/height defined in styles for a table's cells and rows
+ *   @param  {Boolean} [imagesByReference=false] It permits to return two objets ({content, images}) to handle the `<img>` tags by reference
  *   @param  {Function} [customTag] It permits to handle non-regular HTML tag
  *   @param  {Object} [window] The `window` object (required for NodeJS server side use)
  * @return {Object} it returns a PdfMake object
@@ -38,6 +39,7 @@ function htmlToPdfMake(htmlText, options) {
   'use strict';
   this.wndw = (options && options.window ? options.window : window);
   this.tableAutoSize = (options && typeof options.tableAutoSize === "boolean" ? options.tableAutoSize : false);
+  this.imagesByReference = (options && typeof options.imagesByReference === "boolean" ? options.imagesByReference : false);
 
   // Used with the size attribute on the font elements to calculate relative font size
   this.fontSizes = (options && Array.isArray(options.fontSizes) ? options.fontSizes : [10, 14, 16, 18, 20, 24, 28]);
@@ -65,6 +67,9 @@ function htmlToPdfMake(htmlText, options) {
     th: {bold:true, fillColor:'#EEEEEE'}
   }
 
+  // store the references to the images
+  this.imagesRef = [];
+
   /**
    * Permit to change the default styles based on the options
    */
@@ -383,7 +388,17 @@ function htmlToPdfMake(htmlText, options) {
             break;
           }
           case "IMG": {
-            ret.image = element.getAttribute("src");
+            if (this.imagesByReference) {
+              var src = element.getAttribute("src");
+              var index = this.imagesRef.indexOf(src);
+              if (index>-1) ret.image = 'img_ref_'+index;
+              else {
+                ret.image = 'img_ref_'+this.imagesRef.length;
+                this.imagesRef.push(src);
+              }
+            } else {
+              ret.image = element.getAttribute("src");
+            }
             delete ret.stack;
             delete ret.text;
             // apply all the inhirent classes and styles from the parents, or for the current element
@@ -777,6 +792,13 @@ function htmlToPdfMake(htmlText, options) {
   var result = this.convertHtml(htmlText);
   // if we only pass a string without HTML code
   if (typeof result === "string") result={text:result};
+  // if images by reference
+  if (this.imagesByReference) {
+    result = {content:result, images:{}};
+    this.imagesRef.forEach(function(src, i) {
+      result.images['img_ref_'+i] = src;
+    });
+  }
   return result;
 }
 

package.json

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