it-swarm.com.de

Wie man einbettet PDF Datei mit ansprechender Breite

Ich bette pdf-Dateien mit etwas wie dem ein:

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

Es funktioniert, aber ich möchte die PDF-Breite so einstellen, dass sie der Breite des enthaltenen div entspricht. Momentan erscheint es wie ein Iframe mit Bildlaufleisten. Um das gesamte PDF anzuzeigen, müssen Sie von rechts nach links scrollen. Ich möchte, dass das PDF der Breite des Containers entspricht.

Wie kann ich das beheben? Ich unterstütze IE8 und höher.

Hier ist ein jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/

31
emersonthis

Einfach das tun:

<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>
</div>
26
dhanasekar

Wenn Sie Bootstrap 3 verwenden, können Sie die Klasse für das Einbetten verwenden, die auf das Einbetten reagiert, und den Abstand der Auffüllung als Höhe dividiert durch die Breite plus ein wenig mehr für Symbolleisten festlegen. Um beispielsweise ein 8,5-mal-11-PDF-Dokument anzuzeigen, verwenden Sie 130% (11/8,5) plus etwas mehr (20%).

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

Hier ist das Bootstrap-CSS:

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

Ich habe diesen Fehler einmal gemacht - das Einbetten von PDF -Dateien in HTML-Seiten. Ich werde vorschlagen, dass Sie eine JavaScript-Bibliothek verwenden, um den Inhalt der PDF-Datei anzuzeigen. Wie https://github.com/mozilla/pdf.js/

3
chrwahl
<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>
1
Surya R Praveen
<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>
0
Jules S.
<embed src="your.pdf" type="application/pdf#view=FitH" width="actual-width.px" height="actual-height.px"></embed>

Überprüfen Sie diesen Link auf alle PDF Parameter: https://www.Adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page = 7

Chrome hat einen eigenen PDF reader & alle Parameter funktionieren nicht in Chrome. Mozilla ist am schlechtesten für den Umgang mit PDFs.

0
Nimm drei