web-dev-qa-db-fra.com

Faire intégré PDF scrollable sur iPad

J'ai un PDF incorporé dans HTML à l'aide de la balise object. Le PDF incorporé est un gros document et, lorsqu'il est affiché à partir de mon bureau, le PDF s'affiche correctement avec la barre de défilement dans tous les navigateurs, y compris safari. Cependant, lorsque je visualise la même page html sur iPad, le PDF intégré ne comporte pas de barre de défilement. Existe-t-il un moyen de montrer la barre de défilement dans iPad pour un document PDF incorporé. 

Le code utilisé pour intégrer le PDF est

<object data="pdf.pdf" type="application/pdf" width="1000px" height="1200px" id="pdfDoc" name="pdfDoc"></object>

J'ai aussi essayé avec iframe et même cela ne fonctionne pas.

htmlipadpdf
12
Albin Joseph

Cela semble fonctionner:

  • faire en sorte que la balise object soit assez grande pour afficher l'intégralité du PDF, et
  • contenez-le dans un div avec une hauteur et un débordement limités: auto - ajoutez -webkit-overflow-scrolling dans iOS 5+ pour un bon défilement natif.

Voici le code que j'ai utilisé:

<!DOCTYPE html>
<html>
  <head>
    <title>PDF frame scrolling test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
      #container { overflow: auto; -webkit-overflow-scrolling: touch; height: 500px; }
      object { width: 500px; height: 10000px }
    </style>
  </head>
  <body>
    <div id="container">
      <object id="obj" data="my.pdf" >object can't be rendered</object>
    </div>
  </body>
</html>
12
Dave Burt

J'avais besoin de la même chose, alors je partage. 

Problèmes que j'ai rencontrés:

S'il vous plaît essayez ce qui suit:

http://jsfiddle.net/aknMJ/2/embedded/result/

Astuces utilisées:

  1. Lire la largeur du document et redimensionner le PDF cadre en fonction de celui
  2. "width: 100%" ne fonctionne pas avec les iframes sur iPad, j'ai donc dû utiliser les transformations CSS3
  3. Attendez que le PDF soit complètement chargé, puis affichez et redimensionnez le cadre PDF. Sinon, le contenu a été recadré.
$('#pdfFrame').hide();
var pdfFrame = document.getElementById('pdfFrame');
pdfFrame.contentWindow.location.replace(PDF_URL);
$('#pdfFrame').on('load', function () {
    $('#pdfFrame').show();
    var documentWidth = $(document).width()
    var scale = (documentWidth / width) * 0.95;
    $('#pdfFrame').css("-webkit-transform", "scale(" + scale + ")");
});
2
Ali Ok

Sur l'iPad, vous pouvez utiliser deux doigts pour faire défiler le contenu incorporé - cela fonctionne pour les divs avec débordement: scroll

0
Matt

PDF.js fonctionne parfaitement dans notre cas.

Vous pouvez consulter la solution complète 1-ligne ici: Rendre incorporé PDF défilable dans iPad

Bonne chance

0
VanBoch