Faire du PDF intégré défilant dans l'iPad

J'ai un PDF intégré en HTML à l'aide de la balise object. Le PDF intégré est un gros document et vu de mon bureau, le fichier PDF s'affiche correctement avec barre de défilement dans tous les navigateurs tels que safari. Cependant quand j'ai vue la même page html dans iPad le PDF intégré n'ont pas de barre de défilement. Est-il un moyen dans lequel nous pouvons montrer la barre de défilement dans l'iPad pour un intégré à un document PDF.

Le code utilisé pour embeding le PDF est

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

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

source d'informationauteur Albin Joseph

  1. 12

    Cela semble fonctionner:

    • faire l'objet tag assez grand pour montrer l'ensemble de la PDF, et
    • de le contenir dans un div avec hauteur limitée et overflow:auto -- add-webkit-débordement-le défilement dans iOS 5+ pour de bon, natif de défilement.

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

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

    Problèmes que j'ai rencontrés:

    Veuillez essayer ce qui suit:

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

    Utilisé astuces:

    1. Lire le document la largeur et l'échelle de l'PDF image selon que
    2. "width:100%" ne fonctionne pas avec les iframes dans l'iPad, j'ai donc besoin d'utiliser des transformations CSS3
    3. Attendre jusqu'à ce que le PDF est complètement chargé et de montrer ensuite&redimensionner le bloc PDF. Sinon, le contenu a été recadrée.
    $('#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 + ")");
});
  3. 0

    Sur l'iPad, vous pouvez utiliser deux doigts pour faire défiler du contenu intégré - cela fonctionne pour les divs avec overflow:scroll

  4. 0

    PDF.js fonctionne parfaitement dans notre cas.

    Vous pouvez vérifier l'intégrale 1-solution en ligne ici: Faire PDF intégré avec défilement de l'iPad

    Bonne chance