JSFiddle - React, Tailwind, and code Playground

by jatinder_singh02

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>

<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>

<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<a id="download">Download as image</a>
<a id="downloadpdf">Download as pdf</a>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;>
  padding-left: 25px; padding-top: 10px;">
<div id="chart"></div>
</div>

CSS

#chart {
            position: relative;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
    }

JavaScript

$(function () {

            var data = [
                { "CountryName": "China", "Pop1990": 1141, "Pop2008": 1333, "Pop2025": 1458 },
                { "CountryName": "India", "Pop1990": 849, "Pop2008": 1140, "Pop2025": 1398 },
                { "CountryName": "United States", "Pop1990": 250, "Pop2008": 304, "Pop2025": 352 },
                { "CountryName": "Indonesia", "Pop1990": 178, "Pop2008": 228, "Pop2025": 273 },
                { "CountryName": "Brazil", "Pop1990": 150, "Pop2008": 192, "Pop2025": 223 }
            ];

            $("#chart").igPieChart({
                width: "435px",
                height: "435px",
                dataSource: data, //JSON data defined above
                valueMemberPath: "Pop2008",
                labelMemberPath: "CountryName",
                labelsPosition: "bestFit"
            });

var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable

/**
 * Demonstrates how to download a canvas an image with a single
 * direct click on a link.
 */


/**
 * This is the function that will take care of image extracting and
 * setting proper filename for the download.
 * IMPORTANT: Call it from within a onclick event.
*/
function downloadCanvas(link, canvasId, filename) {
alert();
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}

/** 
 * The event handler for the link's onclick event. We give THIS as a
 * parameter (=the link element), ID of the canvas and a filename.
*/

function nowSave(){
    var namefile = prompt("insert name of file to save in png");
    if(namefile === "") {
        alert("You must enter name of file")
    } else {    
    downloadCanvas(document.getElementById("download"), 'canvas', namefile + ".png");
    }
}
$("#btn-Convert-Html2Image").on('click', function () {
   html2canvas(element, {
         onrendered: function (canvas) {
                //$("#previewImage").append(canvas);
                 
               ...