Hacer que el PDF incrustado sea desplazable en iPad

Question 1

Por alguna razón, el navegador safari del iPad no maneja bien los archivos PDF incrustados. Los archivos PDF se ven bien por sí solos cuando se inician de forma independiente, pero no con la etiqueta de objeto. El problema es que no se desplazan.

Tengo una página jquery con un pdf incrustado que se desplaza muy bien en mozilla y chrome, pero en safari (iPad) el PDF permanece atascado en la primera página y no se puede desplazar. La pregunta es, ¿cómo hago para que esto funcione en el navegador del iPad?

Se publicó una pregunta similar aquí Hacer que el PDF incrustado sea desplazable en iPad pero la respuesta no es muy buena. Están haciendo trampa al usar una altura de 10000 px, lo que crea una gran cantidad de espacios en blanco para un documento pequeño y, potencialmente, no funcionará para un documento muy grande:

<!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>

¿Alguna forma de hacer esto sin codificar una altura loca?

Question 2

He intentado durante años encontrar una solución a este problema. Intentaré ahorrarle tiempo a cualquiera que lo busque: NO HAY SOLUCIÓN A ESTE PROBLEMA. La forma en que Safari maneja la representación de PDF está irremediablemente en conflicto con todo el concepto de incrustar un PDF en una página web. Además, se REQUIERE que todos los navegadores de un iPad utilicen el motor de representación de Safari, por lo que ni siquiera podrá indicar a los usuarios que instalen otro navegador.

La única forma de incrustar un PDF con resultados decentes es utilizar algún tipo de utilidad de representación de terceros. Existen algunas soluciones de jQuery, pero para mis propósitos, encontré que la forma más sencilla de hacerlo era incrustar un enlace del visor de documentos de Google en una etiqueta de objeto o iframe. Esto es relativamente simple de hacer, y puede encontrar instrucciones simples aquí:

Cómo ver el enlace PDF de Google Drive en iframe

Esta solución incluye una buena reproducción de pantalla y controles simples de paginación y zoom. Asegúrese de incluir la opción &embedded=true si la está incrustando en un iframe o una etiqueta de objeto o no funcionará. El visor requiere una URL de acceso público para su documento, por lo que si tiene problemas de seguridad, como yo, deberá escribir un servicio web para entregar el documento desde un token de un solo uso.

Hay una buena página web que enumera varias otras opciones en caso de que esté buscando algo un poco más sólido:

http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/

Question 3

PDF.js puede ser la elección correcta. Funciona perfectamente para nosotros.

solo lo descargas de https://mozilla.github.io/pdf.js/ y colóquelo en su sitio web.

Entonces se puede incluir en un iframe

<iframe src="https://stackoverflow.com/web/viewer.html?file=PATH_TO_MY_FILE.PDF"></iframe>

Puede encontrar una demostración aquí: https://mozilla.github.io/pdf.js/web/viewer.html

Saludos

Question 4

Esperemos que esto pueda ayudar a otros en el futuro. Usé el visor de pdf de google para poder desplazar un pdf en un iframe. Entonces, en la etiqueta src, la URL es

https://docs.google.com/gview?url=‘ + ‘insertar enlace a PDF’ + incrustado=verdadero

Question 5

La respuesta del MSD es bastante precisa. He estado tratando de hacerlo de muchas maneras diferentes, desde algunas de las bibliotecas sugeridas hasta el uso de objetos, elementos incrustados, etc.

De todas formas no me hace scroll (iPad air 2 y air 1 al menos en iOS 8). O se desplaza con letras demasiado estiradas, o solo funciona en documentos cortos de 1 o 2 páginas.

El solución lo que encontré más eficiente es proporcionar un enlace a los usuarios de iPad a través del agente de usuario para acceder al archivo directamente, podrán verlo en la pestaña y desplazarse bien por él. No se integra, pero es la solución más eficiente y funcional que pude encontrar para mis necesidades actuales.

Espero que le sirva a alguien que se meta en lo mismo

Question 6

No necesita establecer la altura del objeto en algo loco, solo configúrelo a la misma altura que su elemento contenedor. Para desplazarse usando el objeto de representación de Safari sin esperanza, debe usar dos dedos (tanto arriba/abajo como izquierda/derecha).

También tengo estas propiedades configuradas en mi elemento contenedor:

overflow: scroll;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -webkit-box;

Algo que no pude lograr fue lograr que llenara el ancho del contenedor, pero al menos puede navegar por el documento.

Question 7

Otra solución (sin codificación) es usar Google si solo desea usar incrustaciones de forma selectiva.

Guarda tu pdf en tu Google Drive
Ábrelo con vista previa.
Seleccione “Abrir en nueva ventana” del submenú de los tres elementos.
En la nueva ventana, seleccione “Incrustar elemento” en el submenú de los tres elementos.
Copie el código iframe y péguelo en su página.

Aquí también puede encontrar instrucciones detalladas y en el punto 12 puede ver el código iframe.

Question 8

static downloadPdfChromeApp(linkSource: string) {
        // Crea un div y dentro un object para luego destruirlo y abrir una nueva ventana enviando la data
        const divpdf = document.createElement('div');
        divpdf.innerHTML = '<div style="display:none;position:absolute">' +
            '<object  style="display:none;" id="docuFrame" type="application/pdf" width="1px" height="1px" data="' +
            linkSource + '"></object></div>';
        document.firstElementChild.appendChild(divpdf);
        const frame = document.getElementById('docuFrame') as HTMLObjectElement;
        window.open(frame.data);
        divpdf.remove();
    }

¿Ha sido útil esta solución?