Как вставить PDF файл с гибкой шириной

Я встраиваю pdf файлы, используя что-то вроде этого:

<div class="graph-outline">
    <object style="width:100%;" data="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
    <embed src="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" />
    </object>
</div>

Это работает, но я хочу, чтобы ширина PDF соответствовала ширине содержащего div. В настоящее время он отображается как iframe с полосами прокрутки, поэтому, чтобы просмотреть весь pdf файл, вам нужно прокрутить изображение вправо. Я хочу, чтобы формат PDF соответствовал ширине контейнера.

Как это исправить? Я поддерживаю IE8 и выше.

Вот jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/

Ответы

Ответ 1

Просто сделайте это:

<object data="resume.pdf" type="application/pdf" width="100%" height="800px"> 
  <p>It appears you don't have a PDF plugin for this browser.
   No biggie... you can <a href="resume.pdf">click here to
  download the PDF file.</a></p>  
</object>

Ответ 2

Если вы используете Bootstrap 3, вы можете использовать класс, отвечающий за встраивание, и установить дно прокладки как высоту, деленную на ширину плюс немного лишнее для панелей инструментов. Например, чтобы отобразить 8,5 на 11 PDF, используйте 130% (11/8.5) плюс немного дополнительных (20%).

<div class='embed-responsive' style='padding-bottom:150%'>
    <object data='URL.pdf' type='application/pdf' width='100%' height='100%'></object>
</div>

Здесь Bootstrap CSS:

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

Ответ 3

Я сделал эту ошибку один раз - встраивание PDF файлов в HTML-страницы. Я предлагаю вам использовать библиотеку JavaScript для отображения содержимого PDF. Как https://github.com/mozilla/pdf.js/

Ответ 4

<html>
<head>
<style type="text/css">
#wrapper{ width:100%; float:left; height:auto; border:1px solid #5694cf;}
</style>
</head>
<div id="wrapper">
<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" width="100%" height="100%">
<p>Your web browser doesn't have a PDF Plugin. Instead you can <a href="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf"> Click
here to download the PDF</a></p>
</object>
</div>
</html>

Ответ 5

<object data="resume.pdf" type="application/pdf" width="100%" height="800px"> 
   <p>It appears you don't have a PDF plugin for this browser.
       No biggie... you can <a href="resume.pdf">click here to
       download the PDF file.</a>
  </p>  
</object>