如何像GitHub一样将PDF嵌入网页中

Posted 2023-01-16

我是html / CSS的初学者，不了解任何javascript，但是我可以理解其他人的代码。我正在我的投资组合网站上工作，并希望将简历嵌入到页面中，就像GitHub一样：

我想我需要PDF的尺寸，以便可以将它们写在iframe/embed标签中。怎么做到呢？

还有其他选择吗？

我看到了源代码，并且在canvas之后有一个iframe元素。我想GitHub上的某些脚本会获取PDF的快照，然后使用canvas标签显示它。简历存储在GitHub Repository中。

链接到简历页面：https://github.com/ad1tyawagh/resume/blob/master/aditya_resume.pdf

抱歉，如果我的问题不清楚。这是我第一次在Stack Overflow上发布查询。

答案

David的评论可能是最好的方法：托管实际的PDF并按原样提供。

但是，在服务之前，您正在描述将PDF转换为服务器端的图像。

要完成此任务，您可以充分利用简单的imagemagick转换：

convert input.pdf -quality 100 output.png

然后，大小控制，直接托管或画布打印由您决定。

另一答案

网络的基本思想是，它是连接文本文档的媒介。 URL指向的“资源”以及大多数现代浏览器提供的“资源”可以是HTML文件之外的各种文本文档。也就是说，您可以使用浏览器导航到pdf文件。

如果要在html文档中嵌入PDF，一种常见且相对简单的方法是使用iFrame，它实质上允许浏览器在当前页面内呈现另一个页面或资源。

查看更多信息：HTML embedded PDF iframe

另一答案

只要我知道没有办法在网页上显示pdf，将其转换为jpg，然后将其放置为]，