jsPDF Html2Canvas Project: Export HTML With Multiple Graphs Plotted to PDF Document in JavaScript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="total" class="demo-container">
    <div id="placeholder" style="height: 300px; width: 900px;"></div>
    <div id="placeholder_2" style="height: 300px; width: 900px;"></div>
  </div>
  <a id="generate">Generate</a>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $(function() {
    flot1();
    flot2();
  });

  function flot1() {
    var plot;
    plot = $.plot($("#placeholder"), [{
      label: 'Test',
      data: [
        [0, 0],
        [1, 1]
      ]
    }], {
      yaxis: {
        max: 1
      }
    });
  }

  function flot2() {
    var oilPrices = [
      [1167692400000, 61.05],
      [1167778800000, 58.32],
      [1167865200000, 57.35],
      [1167951600000, 56.31],
      [1168210800000, 55.55],
      [1168297200000, 55.64],
      [1168383600000, 54.02],
      [1168470000000, 51.88],
      [1168556400000, 52.99],
      [1168815600000, 52.99],
      [1168902000000, 51.21],
      [1168988400000, 52.24],
      [1169074800000, 50.48]
    ];

    var exchangeRates = [
      [1167606000000, 0.7580],
      [1167692400000, 0.7580],
      [1167778800000, 0.75470],
      [1167865200000, 0.75490],
      [1167951600000, 0.76130],
      [1168038000000, 0.76550],
      [1168124400000, 0.76930],
      [1168210800000, 0.76940],
      [1168297200000, 0.76880],
      [1168383600000, 0.76780],
      [1168470000000, 0.77080],
      [1168556400000, 0.77270],
      [1168642800000, 0.77490],
      [1168729200000, 0.77410],
      [1168815600000, 0.77410],
      [1168902000000, 0.77320],
      [1168988400000, 0.77270],
      [1169074800000, 0.77370],
      [1169161200000, 0.77240],
      [1169247600000, 0.77120]
    ];
    var data = [{
      data: oilPrices,
      label: "Oil price ($)"
    }, {
      data: exchangeRates,
      label: "USD/EUR exchange rate",
      yaxis: 2
    }];

    var options = {
      canvas: true,
      xaxes: [{
        mode: "time"
      }],
      yaxes: [{
        min: 0
      }, {
        position: "right",
        alignTicksWithAxis: 1,
        tickFormatter: function(value, axis) {
          return value.toFixed(axis.tickDecimals) + "€";
        }
      }],
      legend: {
        position: "sw"
      }
    }

    plot = $.plot("#placeholder_2", data, options);
  }
  //----------------------------------------------------
  $("#generate").on("click", function(e) {

    e.preventDefault();

    var p1 = new Promise(function(resolve, reject) {
      var element = $("#placeholder").get(0);
      html2canvas(element, {
        onrendered: function(canvas) {
          resolve(canvas.toDataURL('image/png'));
        }
      });
    });


    var p2 = new Promise(function(resolve, reject) {
      var element = $("#placeholder_2").get(0);
      html2canvas(element, {
        onrendered: function(canvas) {
          resolve(canvas.toDataURL('image/png'));
        }
      });
    });

    Promise.all([p1, p2]).then(function(screens) {
      var doc = new jsPDF();
      doc.addImage(screens[0], 'PNG', 10, 10, 180, 115);
      doc.addPage();
      doc.addImage(screens[1], 'PNG', 10, 10, 180, 60);
      doc.save('sample-file.pdf');

    });
  });

</script>
</html>

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.