title: Html to Canvas to Base64 to PDF
body: <p>So I'm trying to work out a way to convert html to pdf entirely on the clients side, somewhere I read that you can convert a base64 to a pdf on the client side, and from there I remembered you can create a canvas from html and a Base 64 from a Canvas. So I got everything working up until converting the base64 to pdf. I cant seem to get the last part to work. Here is my code</p>
  
  <pre><code>var element =  document.getElementById('canvas1');
          console.log(element);
  if (typeof(element) == 'undefined' || element == null)
  {
          html2canvas(document.body, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
      $('canvas').attr( 'id', 'canvas1' );
    }
  });
      }
      setTimeout(function() {
   canvas = document.getElementById("canvas1");
  var jpegUrl = canvas.toDataURL("image/jpeg");
  var pngUrl = canvas.toDataURL(); // PNG is the default
  console.log("jp"+jpegUrl);
  console.log("png"+pngUrl);
  window.open("data:application/pdf;base64," + pngUrl);
  console.log('new');
  },500);
  </code></pre>
  
  <p>I'm using the html2canvas library to convert the html to canvas and attach it to the body, and so far that works flawlessly. But why cant I convert the base64 to pdf. It just opens a blank page with the url "data:" as if its not loading the base64 string with it. Any help would be appreciated, I might be over thinking this and im sure there is an easier way. Here is a <a href="http://jsfiddle.net/8Q582/" rel="nofollow">jsfiddle</a> of the problem.</p>