jsPDF Tutorial to Export Chart to PDF Document Using html2canvas and jquery orgchart Library in Javascript Full Project For Beginners

jsPDF Tutorial to Export Chart to PDF Document Using html2canvas and jquery orgchart Library in Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be exporting chart to pdf using jspdf and html2canvas library in javascript. All the full source code of the application is given below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
  <head>
    <title>jsPDF Export Chart to PDF Document Using Html2Canvas in Javascript</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/css/jquery.orgchart.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="chart-container"></div>

    <a
      id="github-link"
      href="https://github.com/dabeng/OrgChart"
      target="_blank"
      ><i class="fa fa-github-square"></i
    ></a>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/js/jquery.orgchart.min.js"></script>
  <script src="script.js"></script>
</html>

 

 

And now you need to make style.css inside the root directory and copy paste the below code

 

style.css

 

#chart-container {
    font-family: Arial;
    height: 420px;
    border: 2px dashed #aaa;
    border-radius: 5px;
    overflow: auto;
    text-align: center;
  }
  
  #github-link {
    position: fixed;
    top: 0px;
    left: 10px;
    font-size: 3em;
  }
  
  .orgchart {
    background: #fff;
  }

 

READ  Build a Duplicate or Repeated Words Finder Tool in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

And now make an script.js file and copy paste the following code

 

script.js

 

'use strict';

(function($){

  $(function() {

    var datascource = {
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'name': 'Bo Miao', 'title': 'department manager' },
        { 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
                { 'name': 'Pang Pang', 'title': 'engineer' },
                { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
              ]
            }
          ]
        },
        { 'name': 'Yu Jie', 'title': 'department manager' },
        { 'name': 'Yu Li', 'title': 'department manager' },
        { 'name': 'Hong Miao', 'title': 'department manager' },
        { 'name': 'Yu Wei', 'title': 'department manager' },
        { 'name': 'Chun Miao', 'title': 'department manager' },
        { 'name': 'Yu Tie', 'title': 'department manager' }
      ]
    };

    var oc = $('#chart-container').orgchart({
      'data' : datascource,
      'visibleLevel': 2,
      'nodeContent': 'title',
      'exportButton': true,
      'exportFilename': 'MyOrgChart',
      'exportFileextension': 'pdf'
    });

  });

})(jQuery);

 

 

And now if you open index.html file inside the browser you will see the below screenshot

 

Leave a Reply