provides option Fileextension

README.md

@@ -14,7 +14,7 @@
 - Align the chart in 4 orientations.
 - Allows user to change orgchart structure by drag/drop nodes.
 - Allows user to edit orgchart dynamically and save the final hierarchy as a JSON object.
-- Supports exporting chart as a picture.
+- Supports exporting chart as a picture or pdf document.
 - Supports pan and zoom
 - Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple-layers or hybrid layout sections)
 - touch-enabled plugin for mobile divice
@@ -568,6 +568,9 @@ $('#chartContainerId').orgchart(options);
     <tr>
       <td>exportFilename</td><td>string</td><td>no</td><td>"Orgchart"</td><td>It's filename when you export current orgchart as a picture.</td>
     </tr>
+    <tr>
+      <td>exportFileextension</td><td>string</td><td>no</td><td>"png"</td><td>Available values are png and pdf.</td>
+    </tr>
     <tr>
       <td>chartClass</td><td>string</td><td>no</td><td>""</td><td>when you wanna instantiate multiple orgcharts on one page, you should add diffent classname to them in order to distinguish them.</td>
     </tr>

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "homepage": "https://github.com/dabeng/OrgChart",
   "authors": [
     "dabeng <[email protected]>"

dist/js/jquery.orgchart.js

@@ -29,6 +29,7 @@
       'chartClass': '',
       'exportButton': false,
       'exportFilename': 'OrgChart',
+      'exportFileextension': 'png',
       'parentNodeSymbol': 'fa-users',
       'draggable': false,
       'direction': 't2b',
@@ -132,8 +133,21 @@
                 .find('.orgchart:visible:first').css('transform', '');
             },
             'onrendered': function(canvas) {
-              $chartContainer.find('.mask').addClass('hidden')
-                .end().find('.oc-download-btn').attr('href', canvas.toDataURL())[0].click();
+              $chartContainer.find('.mask').addClass('hidden');
+              if (opts.exportFileextension.toLowerCase() === 'pdf') {
+                var doc = {};
+                var docWidth = Math.floor(canvas.width * 0.2646);
+                var docHeight = Math.floor(canvas.height * 0.2646);
+                if (docWidth > docHeight) {
+                  doc = new jsPDF('l', 'mm', [docWidth, docHeight]);
+                } else {
+                  doc = new jsPDF('p', 'mm', [docHeight, docWidth]);
+                }
+                doc.addImage(canvas.toDataURL(), 'png', 0, 0);
+                doc.save(opts.exportFilename + '.pdf');
+              } else {
+                $chartContainer.find('.oc-download-btn').attr('href', canvas.toDataURL())[0].click();
+              }
             }
           })
           .then(function() {
@@ -143,9 +157,12 @@
           });
         }
       });
-      var downloadBtn = '<a class="oc-download-btn' + (opts.chartClass !== '' ? ' ' + opts.chartClass : '') + '"'
-        + ' download="' + opts.exportFilename + '.png"></a>';
-      $chartContainer.append($exportBtn).append(downloadBtn);
+      $chartContainer.append($exportBtn);
+      if (opts.exportFileextension.toLowerCase() !== 'pdf') {
+        var downloadBtn = '<a class="oc-download-btn' + (opts.chartClass !== '' ? ' ' + opts.chartClass : '') + '"'
+          + ' download="' + opts.exportFilename + '.png"></a>';
+        $exportBtn.after(downloadBtn);
+      }
     }
 
     if (opts.pan) {

examples/export-orgchart/index.html

@@ -22,6 +22,7 @@
   </div>
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
   <script type="text/javascript" src="https://cdn.rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
   <script type="text/javascript" src="../../dist/js/jquery.orgchart.js"></script>
   <script type="text/javascript" src="scripts.js"></script>
   </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.js",
   "style": [