How to open generated pdf using jspdf in new window

Javascript Problem Overview

I am using jspdf to generate a pdf file. Every thing is working fine. But how to open generated pdf in new tab or new window.

I am using

doc.output('datauri');

Which is opening the pdf in same tab.

Javascript Solutions

Solution 1 - Javascript

Based on the source you can use the 'dataurlnewwindow' parameter for output():

doc.output('dataurlnewwindow');

Source in github: https://github.com/MrRio/jsPDF/blob/master/jspdf.js#L914

All possible cases:

doc.output('save', 'filename.pdf'); //Try to save PDF as a file (not works on ie before 10, and some mobile devices)
doc.output('datauristring');        //returns the data uri string
doc.output('datauri');              //opens the data uri in current window
doc.output('dataurlnewwindow');     //opens the data uri in new window

Solution 2 - Javascript

I have to use this to load the PDF directly. Using doc.output('dataurlnewwindow'); produces an ugly iframe for me. Mac/Chrome.

  var string = doc.output('datauristring');
  var x = window.open();
  x.document.open();
  x.document.location=string;

Solution 3 - Javascript

This solution working for me

window.open(doc.output('bloburl'))

Solution 4 - Javascript

Or... You can use Blob to achive this.

Like:

pdf.addHTML($('#content'), y, x, options, function () {
    var blob = pdf.output("blob");
    window.open(URL.createObjectURL(blob));
});

That code let you create a Blob object inside the browser and show it in the new tab.

Solution 5 - Javascript

Search in jspdf.js this:

if(type == 'datauri') {
    document.location.href ='data:application/pdf;base64,' + Base64.encode(buffer);
}

Add :

if(type == 'datauriNew') {   
    window.open('data:application/pdf;base64,' + Base64.encode(buffer));
}

call this option 'datauriNew' Saludos ;)

Solution 6 - Javascript

using javascript you can send the generated pdf to a new window using the following code.

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

Solution 7 - Javascript

this code will help you to open generated pdf in new tab with required title

 let pdf = new jsPDF();
 pdf.setProperties({
          title: "Report"
      });
      pdf.output('dataurlnewwindow');

Solution 8 - Javascript

This is how I handle it.

window.open(doc.output('bloburl'), '_blank');

Solution 9 - Javascript

Javascript code

// IE doesn't allow using a blob object directly as link href
// instead it is necessary to use msSaveOrOpenBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  window.navigator.msSaveOrOpenBlob(doc.output("blob"), "Name.pdf");
} else {

  // For other browsers:
  // Create a link pointing to the ObjectURL containing the blob.
  doc.autoPrint();
  window.open(
    URL.createObjectURL(doc.output("blob")),
    "_blank",
    "height=650,width=500,scrollbars=yes,location=yes"
  );

  // For Firefox it is necessary to delay revoking the ObjectURL
  setTimeout(() => {    
    window.URL.revokeObjectURL(doc.output("bloburl"));
  }, 100);
}

Solution 10 - Javascript

This works for me!!!

When you specify window features, it will open in a new window

Just like :

window.open(url,"_blank","top=100,left=200,width=1000,height=500");

Solution 11 - Javascript

Generally you can download it, show, or get a blob string:

const pdfActions = {
    save: () => doc.save(filename),
    getBlob: () => {
      const blob = doc.output('datauristring');
      console.log(blob)
      return blob
    },
    show: () => doc.output('dataurlnewwindow')
  }

Solution 12 - Javascript

Step I: include the file and plugin

../jspdf.plugin.addimage.js

Step II: build PDF content var doc = new jsPDF();

doc.setFontSize(12);
doc.text(35, 25, "Welcome to JsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 386, 386);

Step III: display image in new window

doc.output('dataurlnewwindow');

Stepv IV: save data

var output = doc.output();
return btoa( output);

Solution 13 - Javascript

STEP 1
Turn off addblock

STEP 2
Add

window.open(doc.output('bloburl'), '_blank');

Or try

doc.output('dataurlnewwindow')

Solution 14 - Javascript

Javascript code: Add in end line

$("#pdf_preview").attr("src", pdf.output('datauristring'));

HTML Code: Insert in body

<head>
</head>
<body>
<H1>Testing</h1>
<iframe id="pdf_preview" type="application/pdf" src="" width="800" height="400"></iframe>
</body>
</html>

preview within same window inside iframe along with with other contents.

Solution 15 - Javascript

Additionally, it is important to remember that the output method has other values and it might be interesting to test all of them to choose the ideal one for your case.

https://artskydj.github.io/jsPDF/docs/jsPDF.html#output

test one line at a time:

doc.output('arraybuffer');
doc.output('blob');
doc.output('bloburi');
doc.output('bloburl');
doc.output('datauristring');
doc.output('dataurlstring');
doc.output('datauri');
doc.output('dataurl');
doc.output('dataurlnewwindow');
doc.output('pdfobjectnewwindow');
doc.output('pdfjsnewwindow');

Content Type	Original Author	Original Content on Stackoverflow
Question	Satendra Jindal	View Question on Stackoverflow
Solution 1 - Javascript	kardave	View Answer on Stackoverflow
Solution 2 - Javascript	William Entriken	View Answer on Stackoverflow
Solution 3 - Javascript	sol404	View Answer on Stackoverflow
Solution 4 - Javascript	ilter	View Answer on Stackoverflow
Solution 5 - Javascript	Juan Capello	View Answer on Stackoverflow
Solution 6 - Javascript	rod	View Answer on Stackoverflow
Solution 7 - Javascript	Neetz	View Answer on Stackoverflow
Solution 8 - Javascript	Alocus	View Answer on Stackoverflow
Solution 9 - Javascript	Ismael Soschinski	View Answer on Stackoverflow
Solution 10 - Javascript	Aswathy	View Answer on Stackoverflow
Solution 11 - Javascript	Denys Rusov	View Answer on Stackoverflow
Solution 12 - Javascript	Milind Morey	View Answer on Stackoverflow
Solution 13 - Javascript	user3423593	View Answer on Stackoverflow
Solution 14 - Javascript	jiban	View Answer on Stackoverflow
Solution 15 - Javascript	Luis Lobo	View Answer on Stackoverflow