15

I need to generate a thumbnail of PDF file in HTML. Now I use:

<embed width="100%" height="100%" name="plugin" src="http://localhost:54149/Documento/VersaoView?chave=FDC4875EE17FB17B" type="application/pdf">

How can I set the size(191x207px) on this PDF?

Gus de Paula
  • 195
  • 1
  • 1
  • 9

1 Answers1

20

You can just change those "width" and "height" parameters to values you want:

<embed width="191" height="207" name="plugin" src="http://localhost:54149/Documento/VersaoView?chave=FDC4875EE17FB17B" type="application/pdf">

width="191" tells browser to set width to 191 pixels.

This method loads the whole pdf though, not just a thumbnail. For automatic thumbnails generation, you might use PHP as described here How do I convert a PDF document to a preview image in PHP?

Or you could just create a thumbnail image manually, and then add it on your website as an image with link to the pdf file:

<a href="http://example.com/mydocument.pdf">
    <img src="http://example.com/mydocument-thumbnail.jpg" />
</a>
Community
  • 1
  • 1
DarthVanger
  • 1,063
  • 10
  • 10
  • 1
    How do I get the preview of the first page only? – ONE_FE Oct 26 '17 at 16:20
  • or at least stop scrolling of embed tag? – ONE_FE Oct 26 '17 at 16:36
  • @LalindaSampath not sure it's possible to preview only the first page. You can try stop scrolling by adding `style="overflow: hidden"` to the tag. But it's not a very good idea, since the whole pdf will be loaded anyway, just without possibility to scroll. So if the pdf is big, or you have a few of them on the page, it will slow down page loading for users. Displaying jpg image of the first page with link to pdf, instead of embedding the whole pdf using tag, is better idea imho. – DarthVanger Nov 01 '17 at 13:12
  • however 'style="overflow: hidden' does not work on embed tag. – ONE_FE Nov 01 '17 at 18:09
  • 1
    @LalindaSampath we can do a trick - place the `` inside of a parent tag with less width, cutting the part of `` tag, that has scroll: https://plnkr.co/edit/17FyccFcN4i7iigZRD4O?p=preview Though again, this looks like a very bad hack =) and it may differ across browsers - what if firefox shows wider scroll in pdf, than chrome does? etc. Pdf.js library has a working jsfiddle example for really showing the first page of pdf, not just hiding the scroll: https://mozilla.github.io/pdf.js/examples/ but it's much more complicated - involves js etc – DarthVanger Nov 02 '17 at 14:35