如何通过 <iframe> 在 html 中显示 pdf？答案

【问题标题】：How to display pdf in html by <iframe>?如何通过 <iframe> 在 html 中显示 pdf？
【发布时间】：2019-04-18 08:43:07
【问题描述】：

这是我的代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Belter's system biology</title>
</head>
  <body style="width:100%; height:100%;">
      <div id="example1"></div>
      <iframe src="https://sumanbogati.github.io/dirname/sample.pdf" type="application/pdf" style="width: 100%; height: 100%; padding: 0;"></iframe>
  </body>
</html>

但我只有一个非常窄的盒子，如下所示：

这是我的 plnkr 链接：https://next.plnkr.co/edit/wzQBQL7zw6LnMhB1?preview

【问题讨论】：

标签： html pdf iframe

【解决方案1】：

不要将宽度和高度指定为 100%，而是以像素或 vw 或 vh 等形式给出它们。

【讨论】：

为什么我不能使用百分比？
我不知道确切的原因，但是 height:100% 的 body 不起作用，尽管 width:100% 有效。所以改为使用 html,body{width:100%;
谢谢，它有帮助。但是现在我在右边有两个滚动条。
如果页面中只有该 iframe，那么您可以使用 overflow-y: hidden; 作为正文。

【解决方案2】：

您可以查看此以获得更好的指导。

参考链接：https://codepen.io/alxfyv/pen/WxeLve

/* CSS for responsive iframe */
/* ========================= */

/* outer wrapper: set max-width & max-height; max-height greater than padding-bottom % will be ineffective and height will = padding-bottom % of max-width */
#Iframe-Master-CC-and-Rs {
  max-width: 512px;
  max-height: 100%; 
  overflow: hidden;
}

/* inner wrapper: make responsive */
.responsive-wrapper {
  position: relative;
  height: 0;    /* gets height from padding-bottom */
  
  /* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe because not stable in CSS:
    -webkit-overflow-scrolling: touch; overflow: auto; */
  
}
 
.responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  margin: 0;
  padding: 0;
  border: none;
}

/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-572x612 {
  padding-bottom: 107%;
}

/* general styles */
/* ============== */
.set-border {
  border: 5px inset #4f4f4f;
}
.set-box-shadow { 
  -webkit-box-shadow: 4px 4px 14px #4f4f4f;
  -moz-box-shadow: 4px 4px 14px #4f4f4f;
  box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
  padding: 40px;
}
.set-margin {
  margin: 30px;
}
.center-block-horiz {
  margin-left: auto !important;
  margin-right: auto !important;
}

<!-- embed responsive iframe --> 
<!-- ======================= -->

<div id="Iframe-Master-CC-and-Rs" class="set-margin set-padding set-border set-box-shadow center-block-horiz">
  <div class="responsive-wrapper 
     responsive-wrapper-wxh-572x612"
     style="-webkit-overflow-scrolling: touch; overflow: auto;">

    <iframe src="//www.slideshare.net/slideshow/embed_code/key/78NW2yxg5UZMM3"> 
      <p style="font-size: 110%;"><em><strong>ERROR: </strong>  
An &#105;frame should be displayed here but your browser version does not support &#105;frames. </em>Please update your browser to its most recent version and try again.</p>
    </iframe>
    
  </div>
</div>

【讨论】：

你能给我一个简单的版本吗，对我来说有点复杂。