以 HTML 格式生成 PDF 文件的缩略图答案

【问题标题】：Generate a thumbnail of PDF file in HTML以 HTML 格式生成 PDF 文件的缩略图
【发布时间】：2015-06-05 04:21:36
【问题描述】：

我需要在 HTML 中生成 PDF 文件的缩略图。现在我使用：

&lt;embed width="100%" height="100%" name="plugin" src="http://localhost:54149/Documento/VersaoView?chave=FDC4875EE17FB17B" type="application/pdf"&gt;

如何设置此 PDF 的大小（191x207px）？

【问题讨论】：

标签： jquery html angularjs pdf

【解决方案1】：

您可以将这些“宽度”和“高度”参数更改为您想要的值：

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

width="191" 告诉浏览器将宽度设置为 191 像素。

此方法会加载整个 pdf，而不仅仅是缩略图。对于自动生成缩略图，您可以使用此处描述的 PHP How do I convert a PDF document to a preview image in PHP?

或者您可以手动创建缩略图，然后将其作为带有 pdf 文件链接的图像添加到您的网站上：

<a href="http://example.com/mydocument.pdf">
    <img src="http://example.com/mydocument-thumbnail.jpg" />
</a>

【讨论】：

如何只预览第一页？
或者至少停止滚动嵌入标签？
@LalindaSampath 不确定是否可以仅预览第一页。您可以尝试通过将style="overflow: hidden" 添加到标记来停止滚动。但这不是一个好主意，因为无论如何都会加载整个 pdf，只是无法滚动。因此，如果 pdf 很大，或者页面上有几个，它会减慢用户的页面加载速度。显示带有 pdf 链接的第一页的 jpg 图像，而不是使用标签嵌入整个 pdf，恕我直言。
然而 'style="overflow: hidden' 不适用于嵌入标签。
@LalindaSampath 我们可以做一个技巧 - 将 <embed> 放在宽度较小的父标签内，剪切 <embed> 标签的部分，它有滚动：plnkr.co/edit/17FyccFcN4i7iigZRD4O?p=preview 虽然再一次，这看起来像一个非常糟糕的 hack =) 并且它可能因浏览器而异 - 如果 Firefox 在 pdf 中显示比 chrome 更宽的滚动怎么办？等 Pdf.js 库有一个有效的 jsfiddle 示例，用于真正显示 pdf 的第一页，而不仅仅是隐藏滚动：mozilla.github.io/pdf.js/examples 但它要复杂得多 - 涉及 js 等