Adobe PDF innerhalb eines Divs anzeigen

Question

Ich habe eine PDF-Datei, die der Benutzer sehen und auf die Schaltfläche "Ich stimme zu" klicken muss. Wie zeigt man eine PDF-Datei innerhalb eines Divs an?

Answer 1

Ja, das können Sie.

Siehe den Code aus dem folgenden Thread von 2007: PDF innerhalb eines DIVs

<div>
    <object data="test.pdf" type="application/pdf" width="300" height="200">
        alt : <a href="test.pdf">test.pdf</a>
    </object>
</div>

Sie verwendet <object> die mit CSS gestaltet werden können, so dass man sie schweben lassen, ihnen Ränder geben kann usw.

(Am Ende habe ich meine PDF-Dateien so bearbeitet, dass die großen Ränder entfernt wurden, und sie in jpg-Bilder umgewandelt).

Answer 2

Hier ist eine weitere Möglichkeit, PDF innerhalb von Div anzuzeigen, indem man Iframe wie unten verwendet.

<div>
  <iframe src="/pdf/test.pdf" style="width:100%;height:700px;"></iframe>
</div>
<div>
  <!-- I agree button -->
</div>

Answer 3

Wir verwenden dies auf unserer Website

http://issuu.com/smartlook

Es ist ein sehr anpassbares Programm zur Anzeige von PDFs direkt in Ihrem Browser. Es hostet das PDF im Grunde in einem Flash-Objekt, wenn Sie nicht gegen diese Art von Dingen sind.

Hier ist ein Muster von unserer Unternehmenswebsite.

Answer 4

Sie können die Javascript-Bibliothek PDF.JS verwenden, um eine PDF-Datei innerhalb eines Divs anzuzeigen. Die Größe der PDF-Datei kann an die Größe des Divs angepasst werden. Sie können auch Event-Handler für den Wechsel zur nächsten/vorherigen Seite der PDF-Datei einrichten.

Sie können zur Kasse gehen PDF.JS Tutorial - Wie man ein PDF mit Javascript anzeigt um zu sehen, wie PDF.JS in Ihren HTML-Code integriert werden kann.

Answer 5

Ich denke, es funktioniert nicht, weil Sie z-index Eigenschaft nicht auf pdf (jede außerhalb Objekt) angewendet. Also, wenn Sie jedes Steuerelement in PDF-Ansicht Grenze hinzufügen, seine erscheinen hinter der PDF-Ansicht.