PDF like preview

For https://onepile.app I’m currently trying to find a good solution for presenting PDF and similar paged content. I know I could use object or embed or some pdf.js based solution, but they all have their limitations like speed or flexibility.

Supposed I have preview images generated quickly I would like to represented them in a vertical scroll area. It would be great to allow some basic zoom.

I found that the Swiper element might be what I need and wondered if somebody else has already something working like that? Do you think in general that Swiper is the way to go or is there something that fits better?

Swiper can work for it, but the question is how you display pdf there. There is just no normal way to display pdf embeds in browser without 3rd party libs or tools. For on of my client apps I used iframe with pdf, on iOS was not bad, but in desktop it was ugly as iframe with pdf renders also native pdf controls which was ugly :slight_smile:

Haven’t tried pdf.js, but looks like it may work.
But the best way of course would be somehow render it as plain image maybe using some remote service

Indeed, the native solutions are not very satisfying. In the current version of OnePile I use a Vue/pdf.js component. The performance is quite ok but it has some rendering issues, especially when using the new PDF editing feature of iOS 13.

The solution I am using now is simpler. I use Apple’s native rendering to create PNG images for each page. The size is good enough for a good overview. And it is very fast. I would try to use similar approaches on other platforms.

So the only thing I need is some simple preview with some zoom. If you say that Swiper is capable of doing this, I’ll give it a try. Or is there a demo already available somewhere?

But not only for PDF this is a great way of displaying content. The next version of OnePile will also allow to draw/ sketch using a pen or the finger. And I would also like to enrich PDF’s similar to the way I do in Receipts right now in a native view: https://www.receipts-app.com/en/help#features

BTW I also tried to overlay a native view directly but the trade-offs were to big, because any element or animation that would need to be on top of the native view would of course go behind t.

By using Swiper, you mean to display PNG images? Then yes, it has zooming functionality, and this is what used in F7’s Photo Browser. Check Swiper’s example, there is a “Zoom” demo with source code