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.
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
doc.output('dataurlnewwindow');
returns a blank page. Is there anything that I need to do before calling it?
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
This solution working for me
window.open(doc.output('bloburl'))
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;
doc.output('dataurlnewwindow', {})
is consistently crashing the browser (Firefox).
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');
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.
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));
}
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();
This is how I handle it.
window.open(doc.output('bloburl'), '_blank');
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')
}
STEP 1
Turn off addblock
STEP 2
Add
window.open(doc.output('bloburl'), '_blank');
Or try
doc.output('dataurlnewwindow')
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);
}
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");
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);
doc.output("dataurlnewwindow");
opens but doesn't render the PDF; however you can save and print it!
Nov 10, 2016 at 6:23
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.
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');