Как отобразить pdf в html <iframe>? - PullRequest
Новая
       2

Как отобразить pdf в html <iframe>?

0 голосов
/ 15 ноября 2018

Это мой код: 

<!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>

Но я получил только очень узкую коробку, как показано ниже:

enter image description here

Это моя ссылка plnkr: https://next.plnkr.co/edit/wzQBQL7zw6LnMhB1?preview

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Вы можете проверить это для лучшего руководства.

Ссылка: 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>
0 голосов
/ 15 ноября 2018

Вместо указания ширины и высоты, как 100%, укажите их в пикселях или vw или vh и т. Д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...