How to show PDF in browser instead of downloading?

[brilang]

I am using JSPDF 1.4.1
When I'm done generating the PDF, I'm calling:

doc.save(username + uuidv4() + ".pdf");

UUID added to create unique file names.

Is there a way to display the file in the browser instead of saving it? I didn't see anything in the documentation about this.

[calldeludo]

I had the same problem and i found a solution that may help you.

    var string = doc.output('datauristring');
    var embed = "<embed width='100%' height='100%' src='" + string + "'/>"
    var x = window.open();
    x.document.open();
    x.document.write(embed);
    x.document.close();

You have to open this pdf file generated in a new window.

[alex-marinov]

There is also this light JavaScript utility; PDFObject, just discovered when searching around similar solution; PDFObject - I know, I know... I'm late about a year, but better late than never, right? :)

[xphabib]

I had the same problem and i found a solution that may help you.

    var string = doc.output('datauristring');
    var embed = "<embed width='100%' height='100%' src='" + string + "'/>"
    var x = window.open();
    x.document.open();
    x.document.write(embed);
    x.document.close();

You have to open this pdf file generated in a new window.

thank you so much, its really working

[Maskey2]

this is not working for me, it opens a new window: Untitled, blank and does not render my pdf. pdf.save is working and my pdf downloads perfectly but I am not being able to open the pdf in new window. Can someone help me? Thanks

[bony237]

For me too, the code is not working

[HackbrettXXX]

Use an iframe and set its source:

iframe.src = doc.output('datauristring')

[khaphannm]

Use an iframe and set its source:

iframe.src = doc.output('datauristring')

I tried, but did not work. Do u have any other solution? I am using React

[alex-marinov]

Use an iframe and set its source:

iframe.src = doc.output('datauristring')

I tried, but did not work. Do u have any other solution? I am using React

I use PDFObject to embed, works great - https://pdfobject.com/

Here is an example;

<div id="example1"></div>
<script src="/js/pdfobject.min.js"></script>
<script src="/js/jspdf.min.js"></script>

<script>
  PDFObject.embed(createPDF(), "#example1");
            
  function createPDF() {
    var doc = new jsPDF();

    doc.setFont("helvetica");
    doc.setFontStyle("bold");
                
    doc.setFontSize(20);
    doc.text('TEST PDF...', 105, 20, 'center');

    return doc.output('datauristring');    
  }
</script>

[Alexaquijano22]

Estuve teniendo ese problema con jsPDF y esta fue la solucion mas sencilla que encontre, me funciono!
let document = new jsPDF()
document.text("Hola mundo", 10, 10);
window.open(URL.createObjectURL(document.output("blob")))

[github-abhi]

Hi,

I tried with iframe, and now pdf is displaying in the browser but the pdf name is not showing correctly. I log the datauristring output, pdf name is there in the data but not showing correctly.

[github-abhi]

Hi,

I tried with iframe, and now pdf is displaying in the browser but the pdf name is not showing correctly. I log the datauristring output, pdf name is there in the data but not showing correctly.

Hi
I use setProperties and it is working for me.

doc.setProperties({
title: "invoice-pdf",
subject: "This is the subject",
author: "Author Name",
keywords: "generated, javascript, web 2.0, ajax",
creator: "kabir",
});

[div360]

use useState to store the output of jspdf like this setPdf1(doc.output('bloburi')) make the output as bloburi (tried blob and uristring also both didn't work only bloburi worked)
then use iframe giving it the pdf source

<iframe src={pdf1 } height="100%" width="70%" ></iframe>

[venky-123-debug]

does anyone have the solution for svelte? how to show preview of an image as pdf using jsPDF

[lennux23]

use useState to store the output of jspdf like this setPdf1(doc.output('bloburi')) make the output as bloburi (tried blob and uristring also both didn't work only bloburi worked) then use iframe giving it the pdf source

<iframe src={pdf1 } height="100%" width="70%" ></iframe>

It worked like a charm