web-dev-qa-db-fra.com

Afficher le pdf d'Adobe dans un div

J'ai un fichier pdf que l'utilisateur doit voir et cliquer sur le bouton "je suis d'accord" ..__ Comment afficher un pdf dans un div

htmlacrobat
31
Phillip Senn

Oui, vous pouvez. 

Voir le code du fil suivant de 2007: PDF dans une DIV

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

Il utilise <object>, qui peut être stylé avec CSS, et vous pouvez donc les flotter, leur donner des bordures, etc.

(Finalement, j'ai édité mes fichiers pdf pour supprimer les grandes bordures et les convertir en images jpg.)

57
Ron Knee

Voici un autre moyen d'afficher PDF dans Div en utilisant Iframe comme ci-dessous. 

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

2
Sudhir

Nous l'utilisons sur notre site web

http://issuu.com/smartlook

C'est un très personnalisable pour afficher des PDF directement dans votre navigateur. Il héberge fondamentalement le PDF dans un objet flash si vous n'êtes pas opposé à ce genre de chose.

Voici un échantillon de notre site Web d'entreprise.

1
Jason Watts

Vous pouvez utiliser la bibliothèque Javascript PDF.JS pour afficher un PDF dans un div. La taille du PDF peut être ajustée en fonction de la taille du div. Vous pouvez également configurer des gestionnaires d'événements pour passer aux pages suivantes/précédentes du PDF. 

Vous pouvez commander Tutoriel PDF.JS - Comment afficher un PDF avec Javascript pour voir comment PDF.JS peut être intégré dans votre code HTML.

1
Useful Angle

Je pense que cela ne fonctionne pas, car la propriété z-index n'est pas appliquée sur pdf (tout objet extérieur). Ainsi, lorsque vous ajoutez un contrôle dans la limite de vue PDF, il apparaît derrière la vue pdf. 

0
vishwas kadam