CODEWITHSUNDEEP
javascriptjspdf
Satendra Jindal
Satendra Jindal

Reputation: 1078

How to open generated pdf using jspdf in new window

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.

Upvotes: 65

Views: 186617

Answers (16)

Mahmoud
Mahmoud

Reputation: 58

generatePdf():   {
const doc = new jsPDF();
doc.text('Hello, this is your PDF content!', 10, 10);
const blob = doc.output('blob');
const url = URL.createObjectURL(blob);
window.open(url, '_blank');
}

Upvotes: -2

Luis Lobo
Luis Lobo

Reputation: 859

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

Upvotes: 2

Denys Rusov
Denys Rusov

Reputation: 620

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

Upvotes: 4

Ismael Soschinski
Ismael Soschinski

Reputation: 475

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

Upvotes: 3

Aswathy
Aswathy

Reputation: 189

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

Upvotes: 3

Neetz
Neetz

Reputation: 481

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

Upvotes: 16

user3423593
user3423593

Reputation: 61

STEP 1
Turn off addblock

STEP 2
Add

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

Or try 

doc.output('dataurlnewwindow')

Upvotes: 3

Juan Capello
Juan Capello

Reputation: 132

  1. Search in jspdf.js this:

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

  2. Add :

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

Upvotes: 10

Alocus
Alocus

Reputation: 1910

This is how I handle it.

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

Upvotes: 10

sol404
sol404

Reputation: 1733

This solution working for me

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

Upvotes: 29

jiban
jiban

Reputation: 1

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.

Upvotes: 0

Milind Morey
Milind Morey

Reputation: 2116

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

Upvotes: 1

kardave
kardave

Reputation: 1481

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

Upvotes: 135

ilter
ilter

Reputation: 4079

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.

Upvotes: 12

William Entriken
William Entriken

Reputation: 39263

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;

Upvotes: 20

rod
rod

Reputation: 109

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

Upvotes: 10

Related Questions