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 top frame to data URL: data:application/pdf;base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1....

Can you help-me?

Thanks.

score 63 · Accepted Answer · answered Aug 21 '17 at 05:02

63

This works well now that chrome has removed top frame navigation. Only downloading the pdf in chrome gives problem. Download works in well in firefox tho.

var string = doc.output('datauristring');
var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();

answered Aug 21 '17 at 05:02

Joyston

806
8
10

This solution worked for me very well. I'm using html2canvas. – Aaron Kreider Oct 10 '17 at 22:13
Worked for me on Firefox and Chrome. Needed to encodeURIComponent(string) though. – user2099484 Oct 19 '17 at 08:44
1

Then what is the solution for downloading in Chrome? – Sukanta Bala Jan 16 '18 at 12:24
Not sure yet. I'll post the solution if I find any @SukantaBala If someone finds any then please post. I'll upvote it. – Joyston Jan 16 '18 at 18:37
3

@SukantaBala As of now this is how I have handled the download issue. doc.save(filename + '.pdf'); This code automatically downloads the pdf without having to click the download button. – Joyston Jan 16 '18 at 18:46
It's important to use the 'datauristring' option, other options, although may return a datauri, will also open windows and may cause console errors, works well though. – PeterS Feb 15 '18 at 11:41
@Joyston do you call this as well as open the PDF in an iframe? – NorCalKnockOut Mar 13 '18 at 23:37
1

Yes @NorCalKnockOut. Atleast for my purpose I needed to view the pdf so I had to open it in an iframe. You could directly save on your local machine as well by using doc.save(filename + '.pdf'); – Joyston Mar 20 '18 at 11:22
@Joyston Did you ever find a solution for fixing the download button in Chrome? – Carsten Dec 29 '19 at 13:49
using this method, little download icon doesnt work, user can only see the document and cannot save it, anyone else facing the same? – Inzamam Malik May 18 '21 at 08:28
You should also set `frameborder` to 0 and `style` to `margin: 0`. – Caleb Liu Jul 07 '22 at 13:12
Also, this solution has the url in the url box on `about:blank`. Is there a way to change the url to the data url, possibly without navigating? – Caleb Liu Jul 09 '22 at 12:19

score 40 · Answer 2 · answered Aug 03 '17 at 23:16

40

Apparently Google Chrome has removed support for top-frame navigation, you can see more informations here: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM

You may try to render the jsPDF to an iFrame

answered Aug 03 '17 at 23:16

Pedro Calderon

457
4
7

1

hi @MárcioRossato can you please send me the code to render jsPdf in the i frame. – KuldeeP ChoudharY Aug 12 '17 at 08:43
@KuldeePChoudharY hi, i'm using angularJS, I sent the script, and I hope help-you !! – Márcio Rossato Aug 14 '17 at 00:38
Can't download the pdf using this way the download button is not working. – adam Aug 24 '17 at 15:44
@MárcioRossato Can you post the script as new answer – Pruthviraj Nov 09 '17 at 10:50
hi @Pruthviraj, after I use de object tag, like this: https://stackoverflow.com/questions/45649105/not-allowed-to-navigate-top-frame-to-data-url-jspdf/45684345#45684345 – Márcio Rossato Nov 10 '17 at 11:37

score 18 · Answer 3 · answered Aug 15 '17 at 20:14

18

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>')

answered Aug 15 '17 at 20:14

Sadek Lallouani

201
1
4

4

Works for displaying and printing but can't download the pdf, the download button seems to be not triggered. – adam Aug 24 '17 at 15:37
Download works in FF but not in Chrome. Anyone found a solution for chrome yet? – lentyai Aug 30 '17 at 02:12
I didn't find a way to fix this but you can temporary add a download button before your iFrame: 'Download PDF<\a>' This will not affect the print button as long as it is not in the iFrame. You can also ask the user if he wants to download or view the file on main event. – Sadek Lallouani Sep 03 '17 at 06:55
Thanks for the solution, But his doesn't seem to be working in edge browser, Any suggestions? – Pruthviraj Nov 12 '17 at 03:48
The solution works very well but it can be blocked by the popup blocker. Is there a way to prevent this ? My goal was to use this to replace the classic file download. I don't want to show the file link so I've replaced it by an authentified POST call that returns the binary. Thank you. – Clément Picou Feb 21 '18 at 15:55
Seems like it only works with pdf but I want to use it for my text data. – Isin Altinkaya Aug 13 '19 at 22:21

score 11 · Answer 4 · edited Oct 18 '17 at 17:24

11

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();
}

edited Oct 18 '17 at 17:24

Leonardo Alves Machado

2,747
10
38
53

answered Oct 18 '17 at 16:25

nikoz84

133
1
8

such approach can cause browser to freeze the whole page for some time – Kirk Hammett Jun 20 '22 at 10:22
Still throws the error, even when the user clicks it – Caleb Liu Jul 07 '22 at 13:14

score 4 · Answer 5 · answered Sep 04 '21 at 16:49

the download property of the a element has to contain a file name.

function window_download( datauri )
{
  const match = datauri.match(/(filename=)([^;]+)/);
  const fileName = match ? match[2] : '' ;
  if ( fileName )
  {
    const downloadLink = document.createElement("a");
    downloadLink.download = fileName;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = datauri ;
    downloadLink.click();
  }
else
{
throw 'missing download file name' ;
}


   // get contents of pdf from jsPDF as a data uri.
    const uri = pdf.output('datauristring', 'packing-list.pdf' );
    window_download( uri ) ;

score 3 · Answer 6 · answered Aug 12 '20 at 13:03

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 -

best and easiest answer . should be the highest votes . thanks alot — mohammed alani, Apr 23 '22 at 00:06

Lonely Planeteer · Answer 7 · 2017-08-16T06:04:35.980

<iframe id="ManualFrame"
        frameborder="0"
        style="border:0"
        allowfullscreen>
</iframe>

<script>
    $(function () {
        setManualFrame();
    });

    function setManualFrame() {
        $("#ManualFrame").attr("height", screen.height);
        $("#ManualFrame").attr("width", screen.width);
        $("#ManualFrame").attr("src", "data:application/pdf;base64," + Your_PDF_Data);
    }
</script>

score 2 · Answer 8 · answered Dec 17 '17 at 13:49

2

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);
}

answered Dec 17 '17 at 13:49

Surya T

31
2

1

Can you please explain how this solves the original question? – Brett DeWoody Dec 17 '17 at 23:33
you can use this code to open the pdf document in a new tab as a blob... cause chrome blocks JsPDF from opening the document.... which i believe is the original question. – Surya T Dec 18 '17 at 12:12

score 2 · Answer 9 · answered Nov 18 '20 at 15:46

2

Add attrbute download

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

answered Nov 18 '20 at 15:46

Jhonattan

372
3
13

Márcio Rossato · Answer 10 · 2018-10-09T02:28:27.553

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.

edited Oct 09 '18 at 02:28

answered Aug 14 '17 at 00:37

Márcio Rossato

971
1
11
20

I can't use AngularJS, can you please send it in JavaScript? – KuldeeP ChoudharY Aug 14 '17 at 07:47
https://stackoverflow.com/questions/45649105/not-allowed-to-navigate-top-frame-to-data-url-jspdf – KuldeeP ChoudharY Aug 14 '17 at 07:49

score 1 · Answer 11 · answered Nov 30 '17 at 20:52

1

Based on Joyston's answer, but without reparsing and therefore without additional need to escape something:

x=window.open();
iframe=x.document.createElement('iframe')
iframe.width='100%'
iframe.height='100%'
iframe.frameBorder=0
iframe.style="border: 0"
iframe.src='data:text/html........' //data-uri content here
x.document.body.appendChild(iframe);

answered Nov 30 '17 at 20:52

T S

1,656
18
26

I don’t know why, but by using x=window.open(‘about:whatever’); seems to enable downloading. – Lars Rönnbäck May 04 '18 at 10:03

score 1 · Answer 12 · answered Mar 01 '18 at 13:03

1

Not related to jspdf, but did help me here (and this question is the top hit at google): If specifying a download="..." attribute to the anchor tag, the download prompt will properly open up.

answered Mar 01 '18 at 13:03

phil294

10,038
8
65
98

score 1 · Answer 13 · edited Apr 30 '19 at 09:14

1

Using download="" made me able to download the file

edited Apr 30 '19 at 09:14

vimuth

5,064
33
79
116

answered Apr 30 '19 at 08:51

Afíf Kraiem

21
1

score 1 · Answer 14 · edited Feb 27 '20 at 07:41

/**
 * Creates an anchor element `<a></a>` with
 * the base64 pdf source and a filename with the
 * HTML5 `download` attribute then clicks on it.
 * @param  {string} pdf 
 * @return {void}     
 */
function downloadPDF(pdf) {
    const linkSource = `data:application/pdf;base64,${pdf}`;
    const downloadLink = document.createElement("a");
    const fileName = "vct_illustration.pdf";

    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
}

Source from: https://medium.com/octopus-labs-london/downloading-a-base-64-pdf-from-an-api-request-in-javascript-6b4c603515eb

Techdive · Answer 15 · 2019-06-25T10:34:55.553

0

In angular2+ -

app.component.html -

 <object id="obj"  [attr.data]  type="application/pdf"> </object>

app.component.ts

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

  var blob = doc.output("blob");
  window.open(URL.createObjectURL(blob));

edited Jun 25 '19 at 10:34

answered Jun 25 '19 at 10:26

Techdive

997
3
24
49

JsPDF - Not allowed to navigate top frame to data URL

15 Answers15

Linked

Related