web-dev-qa-db-fra.com

Comment intégrer un PDF dans une page HTML?

J'ai besoin d'incorporer un PDF dans une page HTML pour que les utilisateurs le voient sur tous les principaux appareils. La plupart des approches fonctionnent bien sur le bureau, mais elles commencer à montrer des problèmes sur les appareils iPad. Les fichiers PDF ne peuvent plus défiler s'ils sont placés à l'intérieur d'une iframe ou d'une balise d'intégration.

J'ai utilisé les techniques suivantes pour surmonter le problème:

1) Utiliser pdf-image pour le nœud et convertir le PDF en images puis les faire glisser dans une div. Le problème dans cette approche est que la qualité de l'image se dégrade et ne convient pas pour la visualisation sur le Web.

2) Utilisation de PDF.js par Mozilla Cela fonctionne très bien sur tous les appareils mais cela rend la page extrêmement lente et ne répond pas sur iPad

3) Utilisation de Google PDF viewer

<iframe src="https://docs.google.com/viewer?url=http://public-Url-of-pdf.pdf&embedded=true" frameborder="0" height="500px" width="100%"></iframe>

Le problème avec cette approche est que je dois rendre mes PDF accessibles au public , ce que je ne veux pas faire pour des raisons de sécurité.

Aucune des méthodes ci-dessus ne fonctionne pour moi. Existe-t-il une solution pour intégrer PDF dans une page qui fonctionne également sur iPad.

Un de mes collègues m'a parlé de l'utilisation de LibreOffice (Open Office) sans tête pour intégrer des PDF dans ma page, mais je ne trouve aucune documentation sur son utilisation?

Quelqu'un peut-il aider s'il vous plait? :(

Merci d'avance!

javascripthtmlnode.jspdfopenoffice.org
4
writeToBhuwan
<embed src="http://example.com/the.pdf" width="500" height="375" />

Essayez ci-dessus pour un pur HTML. Mais une autre option est que si vous souhaitez utiliser avec javascript, essayez Pdf.js par mozilla. https://github.com/mozilla/pdf.js

3
PPShein

Je pense que la façon la plus simple d'incorporer un PDF dans une page Web est d'utiliser la balise object:

<object data="assets/test.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="assets/test.pdf">click here to
  download the PDF file.</a></p>
</object>

Ce que le code ci-dessus fera: - Si l'utilisateur naviguant sur votre site a un PDF plugin de visualisation (qui est inclus par défaut dans certains navigateurs), il ouvrira le PDF dans le navigateur: - Si l'utilisateur ne dispose pas d'un plugin de visionneuse PDF, il sera présenté avec un lien pour télécharger le PDF et voir sur leur site.

2
Node_Ninja