<p>pdf.js no funciona con requirejs</p>

Creado en 3 may. 2016  ·  18Comentarios  ·  Fuente: mozilla/pdf.js

El siguiente HTML demuestra el problema:

<html> <head> <title>Flexpaper React/Require Sandbox</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js"></script> <script> require(['pdf'], function(pdf) { console.log('PDFJS Module: ' + pdf); console.log('PDFJS Global: ' + window.PDFJS); }); </script> </head> </html>

pdf.js, detecta la existencia de las funciones "require" y "define" y, en consecuencia, NO establece la instancia global de PDFJS. Sin embargo, tampoco devuelve una referencia a esa instancia a través del cargador de módulos.

Debido a que tanto "pdf" como "window.PDFJS" no están definidos en el ejemplo anterior, la biblioteca no se puede utilizar en aplicaciones que requieren. Este es el caso independientemente de si se usa require para cargar pdf.js.

Tenga en cuenta que esto funciona correctamente con la versión 1.0.1040 pero falla con 1.4.20 y 1.5.188. No probé con versiones distintas a esas 3. El comportamiento fue consistente en las tres versiones entre Chrome y Safari.

Comentario más útil

Como también estaba luchando un poco con la referencia correcta en RequireJS, dejaré mi solución, que es parte de la configuración de RequireJS:

paths: {
    'pdfjs-dist/build/pdf': 'myfolder/pdf.min',
    'pdfjs-dist/build/pdf.worker': 'myfolder/pdf.worker.min'
}

Cuando lo hace así, ni siquiera tiene que asignar la ruta al trabajador a PDFJS.workerSrc , como se sugiere en los ejemplos , porque el trabajador se encontrará automáticamente.

Todos 18 comentarios

¿Qué es 'pdf'? ¿Puede dar un ejemplo completo?

Claro, configuraré un repositorio de Github para demostrarlo de manera más completa.

Aquí está el repositorio: https://github.com/MartinSnyder/pdfjs-with-requirejs

'pdf' es la referencia del módulo que require está intentando volver a esa función. En ese escenario, Requirejs está cargando dinámicamente pdf.js e intentando devolver la 'referencia del módulo' a la función de devolución de llamada, sin embargo, la referencia del módulo no está configurada. Puede ver que la carga dinámica ocurre a través del depurador de red del navegador.

Normalmente, esto no sería un gran problema, excepto que algo dentro de pdf.js está detectando que un cargador de módulo está presente y NO está configurando el objeto PDFJS global. Dado que ninguno de los dos está presente, no puede usar la biblioteca cuando requirejs está en la página.

Tenga en cuenta que esto sucede incluso si no utiliza require para cargar el objeto. Puse una referencia de script comentada a pdf.js en la página. Si se coloca antes de require, entonces el global se configurará correctamente. Si se coloca después de require, entonces NO se establecerá el global.

Hay dos problemas con el código:

  1. no se hace referencia al módulo por su nombre, use 'pdfjs-dist / build / pdf' (y si está moviendo pdfjs-dist en un lugar diferente, use require.config para cambiar la ubicación)
  2. está utilizando document.write, que borra el documento

Prueba algo como:

        require.config({paths: {'pdfjs-dist': './node_modules/pdfjs-dist'}});
        require(['pdfjs-dist/build/pdf'], function(pdf) {
            console.log('PDFJS Module: ' + pdf + '<br>');
            console.log('PDFJS Global: ' + window.PDFJS);
        });

Cerrando como respondido.

Tenga en cuenta que esto funciona correctamente con la versión 1.0.1040

Trabajar en esta versión es un efecto secundario de requirejs que carga un script como una etiqueta de script normal; no indica que sea compatible con require.js

establecer la instancia global de PDFJS

PDFJS global se eliminará en versiones futuras, por lo que si está usando requirejs, puede usar el mismo objeto a través de pdf.PDFJS /

Con respecto al punto 1:
No usé node para incluir pdf.js en ese ejemplo. Descargué la distribución oficial y copié pdf.js en el directorio raíz de la muestra. Por esa razón, hacer referencia a él como 'pdf' es correcto. Puede verificar esto mirando el ejemplo en el depurador de red y verá que el archivo se descargó correctamente por require.

Con respecto al punto 2:
Esto se hizo para simplificar el ejemplo. Independientemente de lo que haga el ejemplo, las referencias no están definidas y la biblioteca no se puede utilizar. Específicamente, cambiar a console.log también muestra las referencias como indefinidas.

Con respecto a la eliminación de PDFJS global en versiones futuras:
Estoy de acuerdo con eso, pero ¿cómo se supone que uno debe hacer referencia a la biblioteca a través de pdf.PDFJS cuando pdf no está definido?

No usé node para incluir pdf.js en ese ejemplo

No asumí que estás usando node.js.

descargó la distribución oficial y copió pdf.js en el directorio raíz de la muestra.

PDF.js es una biblioteca y consta de muchos archivos, por ejemplo, el módulo pdfjs-dist / build / pdf puede cargar el módulo pdfjs-dist / build / pdf.worker

Por esa razón, hacer referencia a él como 'pdf' es correcto.

Todavía necesita usar el nombre de AMD lo que se enumera en la definición, consulte https://github.com/MartinSnyder/pdfjs-with-requirejs/blob/master/pdf.js#L21

¿Intentó el ejemplo anterior con require.config apuntando a la biblioteca completa?

¿Intentó el ejemplo anterior con require.config apuntando a la biblioteca completa?

Acabo de completar eso ahora y funciona como dijiste.

¿Significa eso que no puede utilizar la distribución "descargada" que se encuentra aquí para este propósito?
https://mozilla.github.io/pdf.js/getting_started/#download

Siempre que use el paquete del nodo 'pdfjs-dist', está bien, pero ¿se supone que la versión descargada no funciona con esto?

Siempre que use el paquete del nodo 'pdfjs-dist', está bien, pero ¿se supone que la versión descargada no funciona con esto?

Creo que no está relacionado con el tema, pero aún puede usar archivos pdf.js / pdf.worker.js de este paquete, señale requirejs 'pdfjs-dist' a la ubicación comprimida (funcionará desde pdf.js y pdf. Los archivos worker.js se encuentran en la carpeta de compilación).

Todavía necesita usar el nombre de AMD lo que se enumera en la definición, consulte https://github.com/MartinSnyder/pdfjs-with-requirejs/blob/master/pdf.js#L21

Esta fue la parte clave que me faltaba en mi entendimiento. Gracias por tomarse el tiempo de explicármelo.

Hola, tengo un problema similar, así que no voy a abrir uno nuevo, pero pregunta aquí, espero que esté bien.
Estoy tratando de implementar el visor basado en https://github.com/mozilla/pdf.js/blob/master/examples/components/simpleviewer.js usando require.js. Pero cuando necesito archivos pdf.js y pdf_viewer.js, PDFJS.PDFViewer no está definido.

Aquí hay un repositorio de muestra: https://github.com/Lazzi/pdfjs-bower-requirejs

@Lazzi tu módulo main.js parece realmente extraño para AMD, prueba:

define('main', ['pdfjs-dist/build/pdf', 'pdfjs-dist/web/pdf_viewer'], function(pdfjsLib, viewer, require) {

la compatibilidad no es AMD, así que no sé cómo funcionará.

Sí, no es AMD, pero require.js también admite este tipo de definición de módulo: http://requirejs.org/docs/api.html#cjsmodule.

Sin embargo, su cambio propuesto no solucionó mi problema.

@Lazzi Ya veo,

@yurydelendik ¡Funciona! Usted ha sido muy útil. Gracias.

esto puede funcionar para usted además de estar colocado en su require.config

    map: {
        '*': {
            'pdfjs-dist/build/pdf.worker' : 'path/to/your/install/pdf.worker'
        }
    },

La función de mapa es esencialmente un reemplazo de cadena global y el '*' es para qué dependencias usar el reemplazo de cadena; se usa principalmente para incluir diferentes versiones de bibliotecas para otras bibliotecas. Como tener 2 versiones de JQuery ejecutándose en paralelo. Tenga cuidado al usarlo, ya que solo reemplaza cadenas, puede terminar reemplazando rutas en otras dependencias si coinciden.

El '*' en este caso solo será la dependencia principal de pdf.js.

Como también estaba luchando un poco con la referencia correcta en RequireJS, dejaré mi solución, que es parte de la configuración de RequireJS:

paths: {
    'pdfjs-dist/build/pdf': 'myfolder/pdf.min',
    'pdfjs-dist/build/pdf.worker': 'myfolder/pdf.worker.min'
}

Cuando lo hace así, ni siquiera tiene que asignar la ruta al trabajador a PDFJS.workerSrc , como se sugiere en los ejemplos , porque el trabajador se encontrará automáticamente.

¡Gracias @dmaxweiler! Luché con el mismo problema: tenía problemas para que pdf.js se cargara correctamente cuando también usaba RequireJS. ¡Tu solución funcionó para mí! Impresionante. Gracias por tu ayuda.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

kleins05 picture kleins05  ·  3Comentarios

jigskpatel picture jigskpatel  ·  3Comentarios

SehyunPark picture SehyunPark  ·  3Comentarios

anggikolo11 picture anggikolo11  ·  3Comentarios

aaronshaf picture aaronshaf  ·  3Comentarios