Pdf.js: ¿Cómo hacer que pdf.js funcione?

Este es un lugar para informar errores. No es un foro de soporte.
Lea el archivo README en la página principal y mire el visor y los ejemplos.
http://mozilla.github.io/pdf.js/web/viewer.html
http://jsbin.com/pdfjs-helloworld-v2/edit#html , en vivo
http://jsbin.com/pdfjs-prevnext-v2/edit#html , en vivo

Gracias benbro,
No lo sabía, he echado un vistazo a todos los documentos de soporte en vano.

¿Podría sugerir un sitio web que pueda ofrecer ese apoyo?
Gracias por adelantado.

Toda la información que busca se encuentra en el archivo README de la página principal:
https://github.com/mozilla/pdf.js/blob/master/README.md
Busque en la sección de preguntas.

@AliND Los ejemplos proporcionados por @benbro deberían funcionar. De hecho, es mejor descargar el zip completo o clonar el repositorio. Lo hice funcionar simplemente clonando el repositorio y ejecutándolo en una instancia local de XAMPP. No olvide que el visor real está en el archivo web/viewer.html , por lo que visitar la carpeta raíz solo dará como resultado una lista de carpetas.

¿Está intentando que funcione en un servidor web o en una instancia local de XAMPP / WAMP? Publique cualquier información adicional (mensajes de error exactos / advertencias de la consola y el sistema operativo / navegador) si sigue recibiendo errores. Si lo está subiendo a un servidor web, un enlace a su visor también puede ayudar a localizar cualquier problema. Estaremos encantados de ayudarle si realmente parece que no puede resolverlo por sí mismo. :)

@timvandermeij Primero, agradezco su amable respuesta. También agradezco mucho a @benbro , pero los enlaces no me ayudaron a resolver el problema.

Me di cuenta de que muchas personas están teniendo el mismo problema. ¡Algunos lo tenían sin resolver, mientras que aquellos que lo tenían resuelto no mostraron los pasos! Creo que escribir una guía tan pequeña sobre cómo hacer que funcione para principiantes sería muy útil.

@timvandermeij , no puedo instalar XAMPP o cualquier otro agente de servidor por algunas razones. Acabo de crear una cuenta gratuita, a la que puede acceder con los siguientes datos de usuario de ftp:
Nombres de host: pdfjs.eu.pn
Nombre de usuario de FTP: 1468147_admin
Contraseña FTP: hello123?

Probé tres enfoques diferentes y obtuve tres advertencias de PDF diferentes:

1- Descargué todo con WinHTTrack, luego los cargué y me sale este error:
http://pdfjs.eu.pn/pdf.js/web/viewer.html
o "InvalidPDFException". Sin embargo, es extraño que pudiera abrirlo sin conexión (sin el servidor instalado) usando Safari, aunque no del todo correcto.

2- Recibo este error (sin mensaje de advertencia), pero la página no se muestra
http://pdfjs.eu.pn/pdf2.js/web/viewer.html

3- Si subo toda la carpeta comprimida (todos los archivos), llego a este error:
[ocurrió un error al procesar esta directriz]
y luego, el diseño se pierde, todo lo que muestra son algunos botones y campos.

Realmente aprecio tu ayuda.
Esperando sus sugerencias - Muchas gracias
AliND

Mirando http://pdfjs.eu.pn/pdf.js/build/pdf.js , hay "GET" reemplazado por "GET.html" en su servidor (probablemente programa de duplicación), por ejemplo:

      };

      xhr.open('GET.html', this.url);
      for (var property in this.httpHeaders) {
        var value = this.httpHeaders[property];

En http://mozilla.github.io/pdf.js/build/pdf.js no tiene ".html". Cerrando el problema por no válido.

use git para extraer el brach de gh-pages con el código de producción: git clone -b gh-pages https://github.com/mozilla/pdf.js.git pdfjs-gh-pages

Muchas gracias @yurydelendik . Realmente aprecio tu aporte.

Sin embargo, soy un novato con php y javascript.

He probado su consejo (OBTENER), y de hecho es útil. Ahora, se muestra el cargador, pero no el documento. En realidad, cuando cargué por primera vez las carpetas web & src, lo hice, según su sugerencia en el siguiente hilo:
https://github.com/mozilla/pdf.js/issues/2371 (tenga en cuenta que el error que obtuve en este caso fue: [se produjo un error al procesar esta directiva])

No conozco a Yury, pero parece que muchos principiantes enfrentan el mismo problema. Quiero decir, creo firmemente que hay una manera fácil, como en el siguiente ejemplo (mencionado anteriormente), en el que simplemente subes las carpetas para que funcione, será muy útil para mí, así como para muchos otros.
http://www.worldwidewhat.net/2011/08/render-pdf-files-with-html5/

No quiero dar la impresión de que estoy poniendo mi ruido en los asuntos de otras personas, pero sería muy útil proporcionar un tutorial muy breve de este tipo para principiantes, en la página principal de Pdf.js.

Independientemente de si mi problema está resuelto o no, les agradezco a todos por su amable ayuda.
Todo lo mejor//
AliND

Para los principiantes, muchas cosas pueden salir mal. Lo primero que recomiendo a los principiantes es seguir el archivo README, las preguntas frecuentes y los consejos proporcionados en los números. ¿Pudiste configurar node.js, clonar el proyecto usando git y construirlo? ¿Intentaste seguir mi consejo para usar el comando git anterior?

La implementación de pdf.js en la plataforma personalizada está fuera del alcance de este proyecto; sin embargo, estaremos encantados de aceptar las instrucciones detalladas paso a paso de los colaboradores / expertos para una plataforma en particular (en forma de página wiki). Si cree que nos falta algo y sabe cómo resolver el caso común, cree una página wiki.

@AliND Parece que le faltan algunos archivos. El visor de http://pdfjs.eu.pn/pdf.js/web/viewer.html me parece bien, pero la consola afirma que:

 "NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf.js/build/compressed.tracemonkey-pldi-09.pdf"

es decir, el archivo PDF no existe en esa ubicación. Colóquelo allí y debería estar bien.

El segundo enlace no funciona porque le faltan los siguientes archivos:

 "NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/webL10n/l10n.js"
 l10n.js
 "NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/jpgjs/jpg.js"
 jpg.js
 "NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/webL10n/l10n.js"
 l10n.js
 "NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/jpgjs/jpg.js"

Verifique y asegúrese de que los archivos mencionados se puedan encontrar en esa ruta. Por lo que puedo decir, debería hacerlo. Consejo: utilice la consola de Firefox ( CTRL + Shift + K ) para ver los errores que mencioné anteriormente; le ayudarán a localizar cualquier problema.

@AliND http://pdfjs.eu.pn/pdf.js/web/viewer.html ahora funciona parcialmente porque agregué el archivo PDF al directorio de compilación. El hecho de que esto sea necesario podría indicar que sucedió algo sospechoso durante el proceso de construcción. Lo investigaré un poco más por ti y espero darte mejores comentarios.

@AliND Aquí tienes: http://pdfjs.eu.pn/pdf3.js/web/viewer.html

Qué he hecho:

1. Descarga https://github.com/mozilla/pdf.js/archive/master.zip.
2. Extraelo.
3. Sube la carpeta completa a la carpeta pdf3.js de tu cuenta FTP (he omitido dos archivos PDF de prueba grandes ya que no son necesarios y el servidor FTP gratuito tenía algunos problemas con ellos).

Nada especial, tan extraño que me está funcionando. Al segundo enlace definitivamente le faltan algunas carpetas, por eso no funcionó. No tengo ni idea de por qué el primer enlace no funciona como debería, pero supongo que la compilación de PDF.js no fue del todo exitosa.

Aunque esto funcionará muy bien, estoy de acuerdo en que es mejor construirlo en lugar de simplemente descomprimirlo. Espero que puedas trabajar con esto por ahora. Mientras tanto, intentaré crear PDF.js yo mismo y probarlo en su servidor. Si puedo hacer que eso funcione, también publicaré los pasos y, con suerte, todos los problemas se solucionarán entonces :-)

@AliND La versión construida también me funciona, aunque admito que tuve que averiguar un poco cómo funcionaba. Nunca antes había construido PDF.js, así que comencé con https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Debian-Ubuntu%29#wiki -Setup_testing_environnement, pero eso no me dio un buen resultado. Hice lo siguiente para que funcione en su servidor (enlace aquí: http://pdfjs.eu.pn/pdf.js-build/web/viewer.html):

1. Establezca el final de línea correcto si está en Windows como yo: git config --global core.autocrlf input (antes del siguiente paso, o el paso 3 fallará)
2. Clona el repositorio de mi bifurcación, usando git clone https://github.com/timvandermeij/pdf.js.git (pero debes usar el repositorio https://github.com/mozilla/pdf.js siempre actualizado).
3. Ejecute el comando make: node make generic .
4. Después de eso, ignoré el resto de https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Debian-Ubuntu%29#wiki -Setup_testing_environnement, desde no funcionó para mí. No estaba copiando los archivos correctos. Lo que hice fue ir a la carpeta build/generic que se creó en el paso 3 y cargar la carpeta build y web en el servidor web. Eso lo hizo.

Espero que sus problemas se resuelvan siguiendo los pasos que proporcioné aquí y en mi comentario anterior. Buena suerte (¡y perdón por la pared de texto!). :-)

@yurydelendik También encuentro el manual en https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Debian-Ubuntu%29#wiki -Setup_testing_environnement un poco confuso. En la sección From build to production por ejemplo, copia algunos archivos a un directorio de producción, pero pdf.js no se copia, lo que genera un directorio de producción con solo los archivos del visor y no los archivos principales. Tengo la sensación de que faltan pasos allí. ¿Podrías comprobar eso? También puedo reescribir la página wiki siguiendo los pasos anteriores si lo desea, porque creo que será más claro para empezar (o necesitamos ampliar la página wiki actual con más pasos para incluir los archivos principales).

@timvandermeij , ¿

Se agregó una entrada a las preguntas frecuentes: https://github.com/mozilla/pdf.js/wiki/Frequency-Asked-Questions#wiki -gh-pages

@yurydelendik Gracias. Prácticamente hice lo mismo en Windows que en Arch Linux, por ejemplo, pero intentaré ampliar la wiki. :)

@yurydelendik He ampliado la página de instrucciones de Linux en https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Linux%29 para solucionar los problemas que experimenté con él, y también para corregir algunos errores textuales. Esa página me parece bien ahora. Más tarde este día, haré el mismo tipo de página, pero luego me enfocaré en Windows (que actualmente es un elemento pendiente). Es de esperar que agregar más instrucciones cause menos confusión entre los usuarios. :)

Editar: aquí está la versión de Windows: https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Windows%29

Espero que esté satisfecho con los cambios realizados en las páginas de la wiki de Linux y Windows. Creo que ahora son más fáciles de entender, y ahora también tenemos documentación para Windows :)

@timvandermeij gracias por hacer eso.

@timvandermeij : Lo que hiciste es extraordinario; gracias por cada segundo que pasaste allí. Estoy 100% seguro de que esto también será útil para muchos otros. La verificación está en curso, volveré con el resultado muy pronto.

@yurydelendik : Muchas gracias por el aporte, ¡parece que Tim lo ha hecho todo!

Gracias de nuevo y todo lo mejor //
AliND

@AliND , @yurydelendik ¡ Muy feliz de ayudar! De hecho, me gustaría escuchar el resultado. :-)

@timvandermeij
¡Increíble, todo lo que se necesitaba hacer era insertar el archivo pdf en la carpeta de construcción!

¡Las únicas carpetas necesarias son la web! y la compilación (con solo el pdf.js y el archivo pdf a compilar). Además, la carpeta de configuración regional (con locale.properties dentro, si copiamos el archivo de github al servidor local) debe incluirse en la carpeta web.

Por este método bastante fácil y directo, el crédito es para ti @timvandermeij por orientación sobre dónde colocar el archivo pdf (dentro de la carpeta de compilación), y para @yurydelendik por resolver el problema GET.html.

http://pdfjs.eu.pn/pdffinal/web/viewer.html

Pero todavía hay un problema, se ve perfectamente en Firefox, Chrome y Opera. Sin embargo, para Explorer y Opera, hay dos errores:
Safari: Falta el PDF "sample.pdf". Pero aún así, ¡el cargador funciona bien!
Explorer: solo el estilo, ¡nada carga!

Quiero decir, siento que es extraño porque el archivo compatible.js está ahí, y me pregunto qué podría causar este comportamiento en estos navegadores. De todos modos, también he subido todos los demás archivos y carpetas, ¡pero no tuve suerte !.

@timvandermeij : Si utilizo su método y subo la carpeta completa como lo hice antes,

¡Simplemente no entiendo por qué! Incluso descargué la carpeta pdf3.js que cargaste, ¡la volví a cargar! y aun así, ¡no funciona!

Quiero decir, lo que realmente me preocupa es la razón por la cual no funciona con los otros dos navegadores.

¿Algunas ideas?

@timvandermeij He instalado GIT y me he encontrado con diferentes tipos de problemas. Por tanto, prefiero centrarme en la primera solución. Me pregunto si puede darme respuestas a las dos siguientes preguntas:
1- ¿Hay alguna razón por la cual el enlace que publiqué en mi publicación anterior no funciona en IE y Safari?
2- Cuando cargó la carpeta maestra, ¿realizó alguna modificación después?

Gracias de nuevo. Agradezco tu ayuda y la de @yurydelendik .

Todo lo mejor,
AliND

@timvandermeij @yurydelendik

Lo hice funcionar, Gracias Tim. Esta vez utilicé el inspector de elementos de Safari y, por algunas razones, se dirige hacia web / sample.pdf en lugar de build / sample.pdf. ¡Lo mismo ocurre con Internet Explorer! Tenga en cuenta que los enlaces internos en el archivo pdf no funcionan en IE, pero esto no es un problema.

Sin duda alguna, el método de construcción es el correcto, aunque se pueden crear viewer.js separados para cada archivo pdf.

Ahora, si va a http://pdfjs.eu.pn/pdffinal/web/viewer.html , funciona en los 5 navegadores mencionados. (nota: a veces, los navegadores no pueden encontrar algunos archivos en este servidor gratuito, pero en el servidor de pago funciona sin problemas).

Para los futuros usuarios, una forma sencilla es:
1- Clonar http://mozilla.github.io/pdf.js/web/viewer.html (puedes usar HTTrack).
2- Tendrá dos carpetas: web y build (la última tendrá pdf.js que es la más importante - HTTrack en este caso, combine todas las acciones de construcción en este archivo)
2- Abra pdf.js (carpeta de compilación) y cambie GET.html a GET
3- Abra viewer.js (carpeta web) y cambie el nombre del archivo pdf por el suyo.
4- Coloque su archivo pdf tanto en la web (Safari e IE) como en las carpetas de construcción (otros navegadores) (puede alterar un poco, poner el pdf.js en la carpeta web, entonces no sería necesario incluir el mismo pdf dos veces, ¡pero esto podría requerir algo de trabajo!)
5- Subir
6- ¡Debería estar funcionando ahora! tenga en cuenta que este método puede tener fallas que desconozco.

@timvandermeij ¡Simplemente no entiendo por qué no funciona cuando subo la carpeta maestra !, porque en su caso, ¡funcionó perfectamente!

De todos modos, muchas gracias por su amable ayuda y apoyo, y lo diría de nuevo, según las instrucciones de @yurydelendik y @timvandermeij , "el método correcto" es el de compilación; pero como soy investigador de finanzas, no puedo profundizar en el tema de los problemas de tiempo.

Gracias de nuevo y todo - todo lo mejor //
Ali

@AliND ¡Qué bueno que lo hayas hecho funcionar! De hecho, la forma de construcción es la mejor manera de hacerlo, pero el otro método también debería funcionar bien. No hice nada más que descargar el archivo ZIP y extraerlo en el servidor. Sin otras modificaciones. Funcionó a la perfección, por lo que es extraño que no te haya funcionado. Sin embargo, lo más importante es que lo tengas funcionando en todos los navegadores para tu propósito.

También gracias por colocar tus pasos aquí. Podría ayudar a los futuros usuarios que aún experimentan problemas con las páginas wiki actualizadas. La forma descrita en las páginas wiki es definitivamente la forma de proceder y es un método de trabajo, pero si por alguna razón no funciona para alguien, sus pasos pueden servir de ayuda.

No sé cómo un enlace incorrecto a un archivo PDF solo puede romper Safari e IE, y no los otros navegadores. Quizás haya un problema con esa cuenta gratuita, no puedo decirlo.

¡Me alegro de que lo hayas hecho funcionar y todo lo mejor! :-)

@AliND Además, tenga en cuenta que adaptar viewer.js no es la mejor manera de hacerlo. Puede cargar otros archivos usando el parámetro file en la URL, como se describe en https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-% 28Linux% 29 # abriendo -archivos-pdf-desde-su-sitio-web. De esa manera, puede usar un archivo viewer.js y aún abrir todos los archivos PDF que desee.

@timvandermeij Muchas gracias de nuevo :)

De hecho, su método funciona perfectamente en el servidor gratuito; ¡Acabo de probarlo, pero parece que esta vez tengo el problema con el servidor de pago! Acabo de abrir un ticket de soporte para que puedan investigar el problema.

Entonces, para los futuros usuarios también, y aparte del método de construcción, lo que hizo @timvandermeij funciona perfectamente y es mucho más fácil que el método mencionado anteriormente. Para referencia:
1- Simplemente descargue el archivo zip maestro, extráigalo y cárguelo, o cargue y extraiga si el panel de control lo permite (el segundo método es mucho más rápido). Por supuesto, hay algunos archivos y / o carpetas que no son necesarios, pero simplemente cargue todo: D.
2- Abra viewer.js (en la carpeta web) y cambie el nombre del archivo pdf por el suyo. Sube (vuelve a subir) este viewer.js
3- Sube tu archivo pdf (con el nombre especificado en el paso 2) a la carpeta web.
4- Listo (si no funciona, significa que hay un problema con su host; pruebe con un host gratuito y compruébelo usted mismo).

Gracias de nuevo Tim :)
Todo lo mejor//
Ali

¡Vaya, el método de archivo es realmente muy útil! :)

@timvandermeij ha proporcionado una solución completa de ventanilla única :)

Gracias una y otra vez y todo lo mejor //
AliND

Hola
En mi proyecto, necesito cargar la página pdf en un iframe, así que usé la función php file_get_contents para obtener el contenido de viewer.html. Pero hay un error al cargar pdf
PDF.js v? (construir: ?)
Mensaje: InvalidPDFException
la consola está tan abajo,
Error: encabezado de flujo XRef no válido util.js: 186
en error (http://bacchus.weibo.com:8080/js/pdfjs/src/shared/util.js:188:15)
en Object.XRef_readXRef como readXRef
en Object.XRef_parse como parse
en Object.PDFDocument_setup como configuración
en Object.PDFDocument_parse como parse
en http://bacchus.weibo.com : 8080 / js / pdfjs / src / core / pdf_manager.js: 106: 26
en LocalPdfManager_ensure como asegurar
en LocalPdfManager.BasePdfManager_ensureDoc como asegurarDoc
en http://bacchus.weibo.com : 8080 / js / pdfjs / src / core / worker.js: 54: 22
como estoy fresco en JavaScript, no puedo entender por qué sucedió esto, ¿hay alguien que pueda ayudarme?

@xiaotun El archivo PDF parece estar dañado. Abra un nuevo problema y proporcione más detalles, como el nombre / versión del sistema operativo, la versión de PDF.js y el nombre / versión del navegador.

Recibo Advertencia: TT: función indefinida: 32 en la consola.

No se pudo cargar la fuente 'VM_Unknown': No se pudo recuperar el contenido. VM_ Desconocido: 1
@ types / pdfjs-dist podría ser el problema, ¡pero aparece en mi aplicación angular como un archivo tgz en una URL!

El pdf se muestra en el navegador correctamente, ¡pero las entradas del formulario no están allí!

Intenté seguir este tutorial:
https://medium.com/factory-mind/angular-pdf-forms-fa72b15c3fbd