JsPDF - Not allowed to navigate top frame to data URL

Question

After updating Google Chrome, the report jsPDF in a new Window does not work any more.

The console shows the message:

Not allowed to navigate

Answer 1

@kuldeep-choudhary

Hi, in fact, to solve i'm using object tag with angularJS 1.5.xx

<object ng-attr-data="{{data}}" type="application/pdf"></object>

and in script:

$scope.doc.data = $sce.trustAsResourceUrl(doc.output("datauristring"));

---

In pure javascript, maybe like this works:

html:

<object id="obj" type="application/pdf" ></object>

js:

document.elementById('obj').data = doc.output("datauristring");

please, try and correct-me if I wrong.

Answer 2

Maybe can help, create a function to export with the download attribute html5:

var docPdf = doc.output();
exportToFile(docPdf,defaults.type);

function exportToFile(data,type){

    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/'+type+';filename='+'exportar.'+type+';'+'charset=utf-8,' + encodeURI(data);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'exportar.'+type;
    hiddenElement.click();
}

Answer 3

I recently had the same problem using FileReader object to read content and show my JSReport.

 var reader = new FileReader();                        
 reader.onload = function (e) {
      window.open(reader.result, "_blank");
 }
 reader.readAsDataURL(blob);

Unfortunatly after chrome update all my report stopped working. I tried to fix this by using Blob object and it's still working but if you have a popup blocker it will not work.

 var file = new Blob([blob], { type: 'application/pdf' });
 var fileURL = URL.createObjectURL(file);
 window.open(fileURL);

I finally find a way to avoid this problem by creating the iFrame dynamically after reading this topic and i decided to share the solution.

 var file = new Blob([blob], { type: 'application/pdf' });
 var fileURL = URL.createObjectURL(file);
 var win = window.open();
 win.document.write('<iframe src="' + fileURL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')

Answer 4

var pdfUrl = doc.output('datauri').substring(doc.output('datauri').indexOf(',')+1);
var binary = atob(pdfUrl.replace(/\s/g, ''));
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
    view[i] = binary.charCodeAt(i);
}

var blob = new Blob( [view], { type: "application/pdf" });
var url = URL.createObjectURL(blob);

function openPDF(){
    window.open(url);
}

Answer 5

As chrome removed its support for - Top-frame navigation. Luckily jsPDF has an API - "save()", which offers the same functionality as doc.output('datauri')

Below is the example implementation of save()

var doc = new jsPDF();
doc.addImage(imgData, 'JPEG', 0, 0, 300, 160);    
doc.save('fileName.pdf');

save(filename, options) → {jsPDF|Promise}

Saves as PDF document. An alias of jsPDF.output('save', 'filename.pdf'). Uses FileSaver.js-method saveAs. Refer JSPDF documentation for more information -

Answer 6

Add attrbute download

<a href="data:image/jpg;base64,/AA/AABBCCDD..." download="name.jpg"></a>