diff --git a/README.md b/README.md
index 9140b42e..36674cc1 100644
--- a/README.md
+++ b/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);
exportFilename | string | no | "Orgchart" | It's filename when you export current orgchart as a picture. |
+
+ exportFileextension | string | no | "png" | Available values are png and pdf. |
+
chartClass | string | no | "" | when you wanna instantiate multiple orgcharts on one page, you should add diffent classname to them in order to distinguish them. |
diff --git a/bower.json b/bower.json
index 2ca8214b..35279bd7 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "orgchart",
- "version": "1.3.1",
+ "version": "1.3.2",
"homepage": "https://github.com/dabeng/OrgChart",
"authors": [
"dabeng "
diff --git a/dist/js/jquery.orgchart.js b/dist/js/jquery.orgchart.js
index 5c215df5..a0384c05 100644
--- a/dist/js/jquery.orgchart.js
+++ b/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 = '';
- $chartContainer.append($exportBtn).append(downloadBtn);
+ $chartContainer.append($exportBtn);
+ if (opts.exportFileextension.toLowerCase() !== 'pdf') {
+ var downloadBtn = '';
+ $exportBtn.after(downloadBtn);
+ }
}
if (opts.pan) {
diff --git a/examples/export-orgchart/index.html b/examples/export-orgchart/index.html
index 665556c3..78968399 100644
--- a/examples/export-orgchart/index.html
+++ b/examples/export-orgchart/index.html
@@ -22,6 +22,7 @@
+