iframe not recognizing jsPDF output as pdf format

Question

I'm having issues displaying jsPDF output as an actual pdf. I'm trying to mimic something similar to the official site - display a preview of the pdf and give them the option to download it.

With the code below, I managed to set a source for the iframe, but the iframe doesn't recognize the content as an actual pdf. So the browser (chrome/firefox) doesn't have the default pdf options when hovering over the iframe - ie: zoom in, zoom out, print, save, etc.

Is there any way to doc.output(...) the doc as an actual pdf? Is it a different option that I need to pass in? I've tried bloburl, bloburi and datauristring.

// html
<iframe></iframe>
<button>Display pdf</button

.

// js
$('button').on('click', function(){
    var doc = new jsPDF('l', 'pt', 'letter')
    doc.text(20, 20, 'some text' )

    setTimeout(function(){
        var data = doc.output('datauri')
        $('iframe').attr('src', data)
    }, 10)
})

Answer 1

Change your iframe to have a type of "application/pdf".

<iframe type="application/pdf"></iframe>

Answer 2

Html:

<iframe src="" id="order_print" type="application/pdf" class="d-none"></iframe>

Js:

$("#order_print").attr("src", doc.output('bloburl'))

I have used the above method for a long time and it worked perfectly in all Chrome. I didn't test on other browsers.