How to open generated pdf using jspdf in new window

Question

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.

score 124 · Answer 1 · edited Aug 21 '15 at 10:57

124

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

edited Aug 21 '15 at 10:57

mggSoft

974
1
20
31

answered Aug 07 '13 at 08:49

kardave

1,361
1
9
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 07 '13 at 12:34
5

@YaBasha You also need FileSaver.js. – Sheldor the conqueror Feb 17 '14 at 15:51
3

`doc.output('dataurlnewwindow');` returns a blank page. Is there anything that I need to do before calling it? – Meimei Jan 26 '17 at 05:24
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. – Pascal Belloncle Sep 22 '17 at 08: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 ) – Rajesh Akshith Mar 06 '18 at 10:08
Did anyone found the solution of why there is blank pdf in new tab when we use `doc.output('dataurlnewwindow')` . @PascalBelloncle – Pushprajsinh Chudasama Jan 04 '20 at 13:08
@PushprajsinhChudasama been have using `doc.save(...)` instead. Has been working great. – Pascal Belloncle Jan 05 '20 at 06:27

score 19 · Answer 2 · answered Aug 19 '13 at 19:26

19

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;

answered Aug 19 '13 at 19:26

William Entriken

33,800
21
136
182

3

No need to use iframe just use doc.output('dataurlnewwindow', {}) – Satendra Jindal Sep 03 '13 at 08:17
1

@TheBackBencher `doc.output('dataurlnewwindow', {})` is consistently crashing the browser (Firefox). – Aug 12 '14 at 12:41
same as 'doc.output('dataurlnewwindow'); - crashing the browser (Firefox) – jMike Oct 01 '16 at 09:13
2

@FullDecent 4 years later, but now it opens a blank page. – NorCalKnockOut Mar 13 '18 at 23:19

score 18 · Answer 3 · answered Nov 15 '17 at 17:39

18

This solution working for me

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

answered Nov 15 '17 at 17:39

sol404

1,543
12
14

2

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

score 11 · Answer 4 · answered Aug 05 '15 at 12:33

11

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.

answered Aug 05 '15 at 12:33

ilter

3,954
3
32
50

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 '18 at 07:24
@Gene9y it's even older, but you can use localStorage or indexeddb to store the blob. – Weihui Guo Feb 11 '19 at 23:21

score 9 · Accepted Answer · edited May 02 '18 at 02:12

9

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

edited May 02 '18 at 02:12

eyllanesc

221,139
17
121
189

answered Sep 28 '14 at 21:50

Juan Capello

122
1
2

does not work in iOS 8. i found a soloution from @atroy here: http://stackoverflow.com/a/21629499/2978727 – Michael P Nov 29 '14 at 09:13
1

Use 'dataurlnewwindow' with the newest version. – Majestic12 Dec 08 '17 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. – NorCalKnockOut Mar 13 '18 at 23:31

score 9 · Answer 6 · answered Aug 12 '19 at 11:31

9

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

answered Aug 12 '19 at 11:31

Neetz

391
4
8

works perfectly in 2022 – rank Apr 25 '22 at 13:52

score 8 · Answer 7 · answered Jul 25 '13 at 14:58

8

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

answered Jul 25 '13 at 14:58

rod

89
1

1

JsPdf also has functionality for this. You can call the following method. doc.output('dataurlnewwindow'); – rod Jul 25 '13 at 15:20
3

The download button doesn't seem to work with this method. – NorCalKnockOut Mar 13 '18 at 23:14

score 6 · Answer 8 · answered Jan 30 '18 at 20:18

6

This is how I handle it.

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

answered Jan 30 '18 at 20:18

Alocus

1,700
3
20
30

2

@NorCalKnockOut do you have any kind of Ad or Popup Blocker turned on? – Alocus Apr 04 '18 at 18:35
1

The ublock origin ad-blocker blocks the request on chrome, It needs to be disabled for the page – Thomas Ducrot Sep 11 '19 at 10:49

Ismael Soschinski · Answer 9 · 2019-10-23T18:36:47.367

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

You must disable ad blocker for it to work properly – Ismael Soschinski Nov 18 '19 at 23:13 — Ismael Soschinski, Nov 18 '19 at 23:13

score 2 · Answer 10 · answered Feb 18 '19 at 10:09

2

STEP 1
Turn off addblock

STEP 2
Add

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

Or try

doc.output('dataurlnewwindow')

answered Feb 18 '19 at 10:09

user3423593

47
4

score 2 · Answer 11 · answered Aug 14 '19 at 10:37

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

answered Aug 14 '19 at 10:37

Aswathy

179
7

score 2 · Answer 12 · answered Aug 27 '20 at 15:49

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

score 1 · Answer 13 · edited Nov 10 '16 at 06:57

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

edited Nov 10 '16 at 06:57

Richard Nalezynski

641
7
11

answered Mar 02 '14 at 14:05

Milind Morey

2,006
19
15

The `doc.output("dataurlnewwindow");` opens but doesn't render the PDF; however you can save and print it! – Richard Nalezynski Nov 10 '16 at 06:23

score 0 · Answer 14 · edited Apr 02 '17 at 17:20

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.

edited Apr 02 '17 at 17:20

mindvirus

4,660
4
26
45

answered Sep 06 '16 at 07:04

jiban

1

score 0 · Answer 15 · answered Dec 22 '21 at 22:32

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

How to open generated pdf using jspdf in new window

15 Answers15

Linked