html - 如何以HTML和CSS显示PDF的完整大小？

Question

我正在为自己建立一个网站，用于专业用途，希望我的简历可以公开获得。我希望除了下载链接之外，还可以在其中一个页面上查看它。我显然已经有了PDF的下载链接，因为那只是一个简单的链接，但是显示PDF却很困难。

我当前的解决方案只是为每个页面创建.png图像并以这种方式显示，但这并不是一个很好的解决方案。

PDF有两页长，我想显示PDF的完整高度。我研究过的一种方法是：

<iframe src="files/myresume.pdf" style=" width: 100%; height: 100%; overflow: hidden;"></iframe>

这的确使PDF查看器变大了，但没有同时显示两个页面的全高，结果我留下了一个双滚动条和一个通常看起来不好的页面。我也不能完全手动将高度设置为固定的像素数量，因为那样的话，我在小窗户或移动设备上就会溢出。

只是为了澄清一下，我不是要使其全部填充视口的高度，而是要使它仅显示PDF的整个高度，因为我的网站已经可以处理动态高度。

我已经尝试过 this StackOverflow post中的解决方案，但是没有一个起作用。

那么，如何显示PDF的完整高度？

Answer 1

body {
    margin: 0;            /* Reset default margin */
}

iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}

<iframe src="files/myresume.pdf" style=" width: 100%; overflow: hidden;"></iframe>