search

silverwind / droppy

**ARCHIVED** Self-hosted file storage
BSD 2-Clause "Simplified" License
1.62k stars 195 forks source link

Use browsers' built-in PDF viewers #429

Open Tronic opened 3 years ago

Tronic commented 3 years ago

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.

Tronic commented 3 years ago

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.

silverwind commented 3 years ago

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.

Tronic commented 3 years ago 
<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.

silverwind commented 3 years ago

Can't get this to work anywhere besides Desktop Firefox. Chrome, Safari and Android Firefox just stay blank.

https://codepen.io/silverwind/pen/mdPPyPd

silverwind commented 3 years ago

Probably should just use https://pdfobject.com/

Tronic commented 3 years ago

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.

silverwind commented 3 years ago

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).