droppy
droppy copied to clipboard
silverwind
Use browsers' built-in PDF viewers
The PDF preview of Droppy only shows the first page. Instead, up/down arrow keys browse to next/previous document, which is quite confusing. The lack of access to other pages makes the preview useless for most documents.
I would suggest letting the browser display the original PDF file, with cursor keys scrolling within the document.
It would appear that zooming in and browsing pages is actually possible by mouse; not sure how I missed that at first. So, maybe up/down arrow keys are the only thing that should be changed here, although I still find Chrome's PDF viewer more usable than whatever Droppy is doing with its own UI.
How does on embed a pdf using the native browser viewer? Do all browsers have one? I assume this means <iframe>. pdf.js is not ideally integrated, so I'm happy to replace it with better alternatives.
<embed
style="position:absolute; left: 0; top: 0; width: 100%; height: 100%;"
src="foo.pdf"
type="application/pdf"
>
It would seem that position:absolute is needed for navigational controls. Works in Chrome, Firefox and Safari, probably others too.
Can't get this to work anywhere besides Desktop Firefox. Chrome, Safari and Android Firefox just stay blank.
https://codepen.io/silverwind/pen/mdPPyPd
The embed element doesn't work on codepen.io for some reason but the same code on https://zi.fi/pdfembed.html works with all desktop browsers (tried Edge too). Android Chrome shows an "Open" button that opens PDF viewer, while Android Firefox only shows a blank page.
Given all this, PDFObject is probably the way to go.
Yeah, it seems codepen and other sites forbid embedding such content but it should work standalone. Plain <embed> might be the way as I don't see PDFObject really adding any value if <embed> already works everywhere (needs some testing on mobile browsers too).