JSFiddle - React, Tailwind, and code Playground

by Olayinka Otuniyi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<div id="UIComp_0" class="v-info" aria-labelledby="UIComp_0-title" tabindex="0" style="height: 230px; width: 380px; position: relative; font-size: 10px; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg class="v-m-root" focusable="false" tabIndex="-1" width="100%" height="100%" style="left: 0px; top: 0px; height: 100%; width: 100%; display: block; cursor: default;"><defs></defs><g class="v-m-desc-title"><title id="UIComp_0-title">An Interactive Column Chart </title></g><g class="v-m-action-layer-group"></g><g class="v-m-decoration-layer-group"></g><g class="v-m-background"><rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="380" height="230" style="fill:#ffffff"></rect></g><g class="v-m-title" transform="translate(62.34765625, 16)"></g><g class="v-m-legendGroup" transform="translate(16, 214)" role="listbox"><g class="v-m-legend" transform="translate(0,0)"><rect class="v-bound" width="0" height="0" visibility="hidden"></rect></g></g><g class="v-m-main" transform="translate(16, 16)"><g class="v-m-plot" transform="translate(46.34765625, 0)"><rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="301.65234375" height="130.6" style="fill:#ffffff"></rect><clipPath id="plot_main_clipPath_246d5cd1-5ec9-41a1-b6bd-91685857ac7e"><rect y="-1" width="302.65234375" height="131.6"></rect></clipPath><rect class="v-plot-bound v-bound v-zoom-plot" width="301.65234375" height="130.6" fill="transparent"></rect><g clip-path="url(#plot_main_clipPath_246d5cd1-5ec9-41a1-b6bd-91685857ac7e)"><g class="v-plot-main" role="list" transform="translate(0, 0)"><g class="v-gridline-group"><g class="v-gridline" stroke="#e5e5e5" stroke-width="1" shape-rendering="crispEdges"><line...

JavaScript

var doc = new jsPDF('p', 'mm');
$("#print_btn").click(() => {
  html2canvas(document.body, {
    onrendered: function(canvas) {

      var img = canvas.toDataURL("image/jpg");
      doc.addImage(img, 'JPEG', 0, 0);

      doc.save("Chart.pdf");
    }

  })
});