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); exportFilenamestringno"Orgchart"It's filename when you export current orgchart as a picture. + + exportFileextensionstringno"png"Available values are png and pdf. + chartClassstringno""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 @@ + diff --git a/package.json b/package.json index f3f02011..821fed69 100755 --- a/package.json +++ b/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": [