title: Downloading PDF from the Page
body: <p>I want to download PDF that is already assigned to Canvas
  Here is Code: </p>
  
  <pre><code>&lt;div id="container_pdf" class="container" style="background-color:black; width:100%; max-width:100%; height:800px;  overflow-y: auto; position:relative"&gt;
  &lt;div id="pdfControls1" style="position:fixed; background-color:black; width:6%; z-index: 2; max-width:inherit; "&gt;
      &lt;button type='button' id='downloadPdf' data-role='button' onclick="downloadPDF()" "&gt;&lt;span class="k-icon  k-i-printer"&gt;&lt;/span&gt; Download PDF &lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="page" style="text-align:center;z-index: 1;"&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is DisplayPDF function in JS:</p>
  
  <pre><code>$(document).ready(function () {
          function displayPdf() {
              if ('@ViewBag.PathToPdf' != "NOPATH") {
                  PDFJS.getDocument('@ViewBag.PathToPdf').then(function (pdf) {
                      pdfFile = pdf;
                      openPage(pdf, currPageNumber, 1);
                  });
                  $('#pdfControls1').show();
              }
              else {
                  $('#page').append("&lt;div style='color:white;'&gt;&lt;h2&gt;REPORT NOT FOUND!!!&lt;/h2&gt;&lt;/div&gt;");
                  $('#pdfControls1').hide();
              }
          }
          displayPdf();
          $('#page').bind('contextmenu', function (e) {
              return false;
          });
      });
      function printPDF() {
          printJS("" + '@ViewBag.PathToPdf');
      }
      function downloadPDF() {
          var pdf = new jsPDF('p', 'pt', 'a4');
  
          //pdf.addHTML(document.getElementById("page"), function () {
          //    pdf.save("download.pdf");
          //});
      }
  </code></pre>
  
  <p>I can able to see the PDF on my page can anyone please help me how can I down load it?
  Thank You</p>