64

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.

16 Answers 16

132

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
7
  • 1
    When I use doc.output('save', 'filename.pdf'); I receive this error: Uncaught ReferenceError: saveAs is not defined jspdf.js:975, i'm using chrome Version 29.0.1547.66 m.
    – Ya Basha
    Sep 7, 2013 at 12:34
  • 5
    @YaBasha You also need FileSaver.js. Feb 17, 2014 at 15:51
  • 3
    doc.output('dataurlnewwindow'); returns a blank page. Is there anything that I need to do before calling it?
    – Larra
    Jan 26, 2017 at 5:24
  • 1
    in Chrome 60, doc.output('dataurlnewwindow'); creates a new tab, with the url, but you have to press enter to load the pdf. Using the blob option from @ilter works better. Sep 22, 2017 at 8:33
  • doc.output('dataurlnewwindow'); returns a Blank Page Do I need to call any other method before this @devgirl (Have you got the solution for the same ) Mar 6, 2018 at 10:08
27

This solution working for me

window.open(doc.output('bloburl'))
1
  • 7
    window.open(pdf.output('bloburl'), '_blank'); works for me in Chrome
    – Alocus
    Jan 30, 2018 at 20:20
20

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;
4
  • 3
    No need to use iframe just use doc.output('dataurlnewwindow', {}) Sep 3, 2013 at 8:17
  • 1
    @TheBackBencher doc.output('dataurlnewwindow', {}) is consistently crashing the browser (Firefox).
    – user216084
    Aug 12, 2014 at 12:41
  • same as 'doc.output('dataurlnewwindow'); - crashing the browser (Firefox)
    – jMike
    Oct 1, 2016 at 9:13
  • 2
    @FullDecent 4 years later, but now it opens a blank page. Mar 13, 2018 at 23:19
15

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');
1
  • works perfectly in 2022
    – rank
    Apr 25, 2022 at 13:52
12

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.

2
  • A bit old thread but how can I generate the pdf file outside the addHTML? It seems 'blob' is a local variable so alert(blob) shows 'undefined'. Any clue?
    – Gene9y
    Feb 16, 2018 at 7:24
  • @Gene9y it's even older, but you can use localStorage or indexeddb to store the blob.
    – Weihui Guo
    Feb 11, 2019 at 23:21
10
  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 ;)
3
  • does not work in iOS 8. i found a soloution from @atroy here: stackoverflow.com/a/21629499/2978727
    – Michael P
    Nov 29, 2014 at 9:13
  • 1
    Use 'dataurlnewwindow' with the newest version.
    – Majestic12
    Dec 8, 2017 at 19:43
  • 1
    @Majestic12 This opens a blank page with the uri string in the address bar for me... I have to hit enter. Mar 13, 2018 at 23:31
10

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();
2
  • 1
    JsPdf also has functionality for this. You can call the following method. doc.output('dataurlnewwindow');
    – rod
    Jul 25, 2013 at 15:20
  • 3
    The download button doesn't seem to work with this method. Mar 13, 2018 at 23:14
10

This is how I handle it.

window.open(doc.output('bloburl'), '_blank');
2
  • 2
    @NorCalKnockOut do you have any kind of Ad or Popup Blocker turned on?
    – Alocus
    Apr 4, 2018 at 18:35
  • 1
    The ublock origin ad-blocker blocks the request on chrome, It needs to be disabled for the page Sep 11, 2019 at 10:49
4

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

STEP 1
Turn off addblock

STEP 2
Add

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

Or try

doc.output('dataurlnewwindow')
0
3

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);
}
1
  • You must disable ad blocker for it to work properly Nov 18, 2019 at 23:13
2

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

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

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);
1
  • The doc.output("dataurlnewwindow"); opens but doesn't render the PDF; however you can save and print it! Nov 10, 2016 at 6:23
0

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.

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.