web-dev-qa-db-fra.com

Problèmes d'affichage PDF dans iFrame sur Mobile Safari

Dans notre application Web, nous affichons un document PDF dans une iframe à l'aide de la ligne de code suivante:

<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf" 
                             style="width:100%; height:500px;"></iframe>

Cela fonctionne bien dans tous les principaux navigateurs de bureau avec la largeur de la mise à l'échelle PDF pour tenir dans les limites de l'iFrame et une barre de défilement verticale pour afficher toutes les pages du document.

Pour le moment, toutefois, je ne parviens pas à afficher correctement le PDF dans Mobile Safari. Dans ce cas, seule la partie supérieure gauche du PDF est visible sans barres de défilement horizontale ou verticale pour afficher le reste du document.

Est-ce que quelqu'un sait que j'ai résolu ce problème dans Mobile Safari?

MISE À JOUR - MARS 2013 

Après des heures de recherche et d’expérimentation, je peux conclure que ce problème est un véritable gâchis! Il y a un tas de solutions mais chacune est loin d'être parfaite. Je conseille à tout le monde qui a des difficultés avec celui-ci de se référer à « Stratégies pour l'iFrame sur le problème iPad '. Pour moi, je dois écrire celui-ci et rechercher une autre solution pour nos utilisateurs d'iPad. 

MISE À JOUR - MAI 2015

Juste une mise à jour rapide sur cette question. Récemment, j'ai commencé à utiliser le lecteur Google Drive, qui a en grande partie résolu le problème initial. Indiquez simplement le chemin d'accès complet au document PDF et Google renverra une interprétation au format HTML de votre PDF (n'oubliez pas de définir embedded=true). par exemple. 

https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf

J'utilise ceci comme solution de secours pour de plus petites fenêtres et incorpore simplement le lien ci-dessus dans mon <iframe>.

iosipadpdfiframemobile-safari
39
QFDev

J'ai trouvé une nouvelle solution. À partir de iOS 8, Safari pour mobile convertit le PDF sous forme d'image dans un document HTML dans le cadre. Vous pouvez ensuite ajuster la largeur après le chargement de PDF:

<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload = function() {
    this.document.getElementsByTagName("img")[0].style.width="100%";
};
</script>
11
Wes Reimer

try pdf.js devrait également fonctionner dans safari mobile: https://github.com/mozilla/pdf.js/

2
Mike

Ma solution consiste à utiliser Google Drive sur mobile et un fichier PDF standard intégré dans un iframe sur des écrans plus grands.

.desktop-pdf {
    display: none;
}

.mobile-pdf {
    display: block;
}
@media only screen  and (min-width : 1025px) {

  .mobile-pdf {
      display: none;
  }

  .desktop-pdf {
      display: block;
  }
}

    <div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">
        <div class="pdf">
            <iframe class="desktop-pdf" scrolling="auto" src="URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
                <p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
            </iframe>
            <iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
                <p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
            </iframe>
        </div>
    </div>
0
froggomad