jsPDF doesn't work in Chrome, only Firefox & Safari

Question

I'm trying to export an application to a PDF using jsPDF. After browsing around the web, grabbing a line of code here, a section there - I have managed to get it working... somewhat .

It works in Firefox & Safari, but not in Chrome.

JS-Files used (from jsPDF). Perhaps overkill. Along with Jquery.

    <script type="text/javascript" src="PDF/standard_fonts_metrics.js"></script> 
    <script type="text/javascript" src="PDF/split_text_to_size.js"></script>               
    <script type="text/javascript" src="PDF/from_html.js"></script>
    <script type="text/javascript" src="PDF/addhtml.js"></script>               
    <script type="text/javascript" src="PDF/addimage.js"></script>

The code I'm using is this:

<script type="text/javascript">
function demoFromHTML() {
  $('#listAreaPDF').css("display", "block");

  var pdf = new jsPDF('p', 'pt', 'letter');
  // source can be HTML-formatted string, or a reference
  // to an actual DOM element from which the text will be scraped.
  source = $('#listAreaPDF')[0];

  pdf.setFontSize(24);
  pdf.text(35, 40, "PDF Title here");

  pdf.setFontSize(10);
  pdf.text(500, 40, "Company Name AB");

  // we support special element handlers. Register them with jQuery-style 
  // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
  // There is no support for any other type of selectors 
  // (class, of compound) at this time.
  specialElementHandlers = {
    // element with id of "bypass" - jQuery style selector
    '#bypassme': function (element, renderer) {
      // true = "handled elsewhere, bypass text extraction"
      return true
    }
  };
  margins = {
    top: 80,
    bottom: 60,
    left: 40,
    width: 522
  };


  // all coords and widths are in jsPDF instance's declared units
  // 'inches' in this case
  pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, {// y coord
      'width': margins.width, // max width of content on PDF
      'elementHandlers': specialElementHandlers
    },
    function (dispose) {
      html2canvas($("#presentationArea"), {
        onrendered: function (canvas) {
          var imgData = canvas.toDataURL(
            'image/png');

          pdf.addImage(imgData, 'PNG', 20, 300);
          pdf.save('Test.pdf');
        }
      });
      // dispose: object with X, Y of the last line add to the PDF 
      // this allow the insertion of new lines after html
      // pdf.save('Test.pdf');
    },
    margins
  );
  $('#listAreaPDF').css("display", "none");
}
</script>

Credit for the code found here. With few small changes to suit my application, I have added a connection to html2canvas to lift an image out of my application and placing it into the PDF. Which actually works OK - in Safari and Firefox.

When clicking and activating this function in Chrome I dont even recieve a blank PDF, I get nothing. Not even a pop-up or page generated.

What might be the reason Firefox&Safari works but not Chrome? I have not yet tried Internet Explorer, but I'm not holding my breath. Should you know a way for that to work I'm all for it.

Cheers for any help or suggestions you might provide.

Answer 1

This issue might be related chrome's deprecation of top-frame navigation .

Remove: Content initiated top frame navigations to data URLs (removed)

We intend to block web pages from loading data: URLs in the top frame using tags, window.open, window.location and similar mechanisms.

Pseudo URLs such as data: are generally a source of confusion for users. Because of their unfamiliarity, these schemes are widely being used in spoofing and phishing attacks. Users browsing the web ideally should only ever end up on the two well known schemes (http and https).

Deprecated in M58

Removal in M60

https://www.chromestatus.com/feature/5669602927312896

A possible solution for this is, as described in the mentioned google groups thread, to use an iFrame.