1

On a click event, I want to render a PDF inside an element, and I'm appending it in an object tag.

As a fallback for older browsers, I'd like to make the PDF to download automatically. Here's what I'm working with

<div class="selected">
    <object data="loader-resources/doc.pdf" type="application/pdf" class="loaded" width="100%" height="100%">
    <p class="error">Your browser cannot display pdf within a website.</p>
    </object>
</div>

I can't do this server-side, via Content Disposition in my HttpResponse header as it directs here, because I want the PDF to render on-page if the user's browser supports it.

Any ideas?

Community
  • 1
  • 1
Bryce Johnson
  • 6,689
  • 6
  • 40
  • 51
  • Would [PDFObject](http://pdfobject.com/) be a suitable solution? JS-based and doesn't work on Mobile, but I've tested it as far back as IE 6 in BrowserStack. On iOS 6 (and presumably other OSes that don't support this technique) it gives the user the option to download the PDF - on iOS this would simply open it in a new Safari Tab. Or how about [PDF.js](http://mozilla.github.io/pdf.js/), which is built by Mozilla. Broken in IE 6/7/8 though, so it doesn't solve your original problem. Finally [yepnope.js](http://yepnopejs.com/) might be able to help with conditional loading. – James Thomas Mar 11 '14 at 16:33

1 Answers1

0

Old browser, what else work better than simple

<a href="doc.pdf">download</a>

Then setup another route on the server for fallback.

For not that old browser you may able to download the pdf as string and do(break in IE 9 & below):

<a href='data:application/pdf;content-disposition:attachment;filename=doc.pdf,' + pdfstring</a>
wayne
  • 3,410
  • 19
  • 11