PDF First page image preview in DIV on website

Question

In my system, there are multiple PDFs listed in the website. I need to show the preview image of 1st page of all the PDFs. There are two previews which I want to display -

• One small preview
• One big preview on mouse hover

What I am doing now?

We are taking help few third party preview generators. Which is used to create JPEG image and using those images in the website for previews.

What I tried differently?

I used EvoPDFtoHTML tool to use HTML instead of images directly but for many files the generated HTML is not appropriate.

Also, These both process is taking a lot of time and making website slow in response.

I would like to know that is there any better way to achieve this?

Image attached below for better understandings -

Answer 1

An approach that is worth exploring

• Parse the PDF and extract the 1st page.You may use command line tools like : PDFtk, Ghostscript, or Implement your own class to parse out the first page in C#
• Then use Google doc viewer and embed an iframe to point to PDF

Example of PDFtk:

pdftk input.pdf cat 1 output page-1-of-input.pdf

Example of GhostScript:

gs -o page-1-of-input.pdf -sDEVICE=pdfwrite -dPDFLastPage=1 input.pdf

References:

Display first page of PDF as Image

You can also look at Fahims answer for the C# snippet that he tried