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

Posted 2023-02-25

【中文标题】以 HTML 格式生成 PDF 文件的缩略图

【英文标题】：Generate a thumbnail of PDF file in HTML

【发布时间】：2015-06-05 04:21:36

【问题描述】：

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

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

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

【参考方案1】：

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

<embed   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 等