<p>pdf.js funktioniert nicht mit requirejs</p>

Erstellt am 3. Mai 2016  ·  18Kommentare  ·  Quelle: mozilla/pdf.js

Der folgende HTML-Code veranschaulicht das Problem:

<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, erkennt die Existenz der Funktionen "require" und "define" und setzt dementsprechend NICHT die globale PDFJS-Instanz. Es gibt jedoch auch keinen Verweis auf diese Instanz über den Modullader zurück.

Da im obigen Beispiel sowohl "pdf" als auch "window.PDFJS" undefiniert sind, kann die Bibliothek nicht in Anwendungen verwendet werden, die require verwenden. Dies ist unabhängig davon der Fall, ob require zum Laden von pdf.js verwendet wird oder nicht.

Beachten Sie, dass dies mit Version 1.0.1040 korrekt funktioniert, aber mit 1.4.20 und 1.5.188 fehlschlägt. Ich habe nicht mit anderen Versionen als diesen 3 getestet. Das Verhalten war in allen drei Versionen zwischen Chrome und Safari konsistent.

Hilfreichster Kommentar

Da ich auch in RequireJS etwas mit der korrekten Referenzierung zu kämpfen hatte, werde ich meine Lösung verlassen, die Teil der RequireJS-Konfiguration ist:

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

Dabei müssen Sie nicht einmal den Pfad zum Worker PDFJS.workerSrc zuweisen, wie in den Beispielen vorgeschlagen , da der Worker automatisch gefunden wird.

Alle 18 Kommentare

was ist 'pdf'? können Sie ein vollständiges Beispiel liefern?

Sicher, ich werde ein Github-Repository einrichten, um es genauer zu demonstrieren.

Hier ist das Repo: https://github.com/MartinSnyder/pdfjs-with-requirejs

'pdf' ist die Modulreferenz, die von require versucht, zu dieser Funktion zurückzukehren. In diesem Szenario lädt Requirejs dynamisch pdf.js und versucht, die 'Modulreferenz' an die Callback-Funktion zurückzugeben, die Modulreferenz ist jedoch nicht festgelegt. Sie können die dynamische Last über den Netzwerk-Debugger des Browsers sehen.

Dies wäre normalerweise keine große Sache, außer dass etwas in pdf.js erkennt, dass ein Modullader vorhanden ist und dann NICHT das globale PDFJS-Objekt setzt. Da beides nicht vorhanden ist, können Sie die Bibliothek nicht verwenden, wenn requirejs auf der Seite ist.

Beachten Sie, dass dies auch dann passiert, wenn Sie require nicht zum Laden des Objekts verwenden. Ich habe auf der Seite eine auskommentierte Skriptreferenz zu pdf.js eingefügt. Wenn dies vor require platziert ist, wird das Global richtig eingestellt. Wenn dies hinter require steht, wird das Global NICHT gesetzt.

Es gibt zwei Probleme mit dem Code:

  1. Modul nicht mit seinem Namen referenziert wird, verwenden Sie 'pdfjs-dist/build/pdf' (und wenn Sie pdfjs-dist an einen anderen Ort verschieben, verwenden Sie require.config, um den Speicherort zu ändern)
  2. Sie verwenden document.write, das Dokument löscht

Versuchen Sie etwas wie:

        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);
        });

Schließen wie beantwortet.

Beachten Sie, dass dies mit Version 1.0.1040 korrekt funktioniert

Die Arbeit mit dieser Version ist ein Nebeneffekt des Ladens eines Skripts als reguläres Skript-Tag von requirejs -- bedeutet nicht, dass es mit require.js kompatibel ist

Setzen Sie die globale PDFJS-Instanz

Globales PDFJS wird in zukünftigen Versionen entfernt. Wenn Sie also requirejs verwenden, können Sie dasselbe Objekt über pdf.PDFJS / verwenden.

Zu Punkt 1:
Ich habe in diesem Beispiel keinen Knoten verwendet, um pdf.js einzuschließen. Ich habe die offizielle Distribution heruntergeladen und pdf.js in das Stammverzeichnis des Beispiels kopiert. Aus diesem Grund ist es richtig, es als 'pdf' zu bezeichnen. Sie können dies überprüfen, indem Sie sich das Beispiel im Netzwerk-Debugger ansehen und sehen, dass die Datei von require korrekt heruntergeladen wurde.

Zu Punkt 2:
Dies wurde gemacht, um das Beispiel zu vereinfachen. Unabhängig von der Funktion des Beispiels sind die Referenzen undefiniert und die Bibliothek kann nicht verwendet werden. Insbesondere beim Wechsel zu console.log werden die Referenzen auch als undefiniert angezeigt.

In Bezug auf das Entfernen von Global PDFJS in zukünftigen Versionen:
Ich bin damit einverstanden, aber wie soll man über pdf.PDFJS auf die Bibliothek verweisen, wenn pdf nicht definiert ist?

Ich habe in diesem Beispiel keinen Knoten verwendet, um pdf.js einzuschließen

Ich habe nicht angenommen, dass Sie node.js verwenden.

die offizielle Distribution heruntergeladen und pdf.js in das Stammverzeichnis des Beispiels kopiert.

PDF.js ist eine Bibliothek und besteht aus vielen Dateien, zB pdfjs-dist/build/pdf module kann pdfjs-dist/build/pdf.worker module laden

Aus diesem Grund ist es richtig, es als 'pdf' zu bezeichnen.

Sie müssen immer noch den AMD-Namen verwenden, der in der Definition aufgeführt ist, siehe https://github.com/MartinSnyder/pdfjs-with-requirejs/blob/master/pdf.js#L21

Haben Sie das obige Beispiel mit require.config versucht, das auf die vollständige Bibliothek verweist?

Haben Sie das obige Beispiel mit require.config versucht, das auf die vollständige Bibliothek verweist?

Ich habe das jetzt abgeschlossen und es funktioniert wie du gesagt hast.

Heißt das, dass Sie die hier gefundene "heruntergeladene" Distribution dafür nicht verwenden können?
https://mozilla.github.io/pdf.js/getting_started/#download

Solange Sie das Paket 'pdfjs-dist' des Knotens verwenden, geht es Ihnen gut, aber die heruntergeladene Version soll damit nicht funktionieren?

Solange Sie das Paket 'pdfjs-dist' des Knotens verwenden, geht es Ihnen gut, aber die heruntergeladene Version soll damit nicht funktionieren?

Ich denke, es hat nichts mit dem Thema zu tun, aber Sie können trotzdem pdf.js/pdf.worker.js-Dateien aus diesem Paket verwenden, zeigen Sie requirejs 'pdfjs-dist' auf den gezippten Speicherort (es funktioniert seit pdf.js und pdf. worker.js-Dateien befinden sich im Build-Ordner).

Sie müssen immer noch den AMD-Namen verwenden, der in der Definition aufgeführt ist, siehe https://github.com/MartinSnyder/pdfjs-with-requirejs/blob/master/pdf.js#L21

Dies war der Schlüssel, der mir in meinem Verständnis gefehlt hat. Vielen Dank, dass Sie sich die Zeit genommen haben, es mir zu erklären.

Hallo, ich habe ein ähnliches Problem, daher werde ich kein neues eröffnen, aber frag hier, ich hoffe, das ist in Ordnung.
Ich versuche, den Viewer basierend auf https://github.com/mozilla/pdf.js/blob/master/examples/components/simpleviewer.js mit require.js zu implementieren. Aber wenn ich sowohl pdf.js- als auch pdf_viewer.js-Dateien benötige, ist PDFJS.PDFViewer nicht definiert.

Hier ist ein Beispiel-Repository: https://github.com/Lazzi/pdfjs-bower-requirejs

@Lazzi Ihr main.js- Modul sieht für AMD wirklich seltsam aus, versuchen Sie es mit:

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

Kompatibilität ist nicht AMD, daher weiß ich nicht, wie es funktionieren wird.

Ja, es ist nicht AMD, aber require.js unterstützt auch diese Art von Moduldefinition: http://requirejs.org/docs/api.html#cjsmodule.

Ihre vorgeschlagene Änderung hat mein Problem jedoch nicht behoben.

@Lazzi Ich

@yurydelendik Es funktioniert! Du warst sehr hilfreich. Dankeschön.

Dies kann auch für Sie funktionieren, wenn Sie es in Ihre require.config einfügen

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

Die map-Funktion ist im Wesentlichen ein globaler String-Ersatz und das '*' gibt an, für welche Abhängigkeiten der String-Ersatz verwendet werden soll -- meist verwendet, um verschiedene Versionen von Bibliotheken für andere Bibliotheken einzuschließen. Als ob 2 Versionen von JQuery parallel laufen. Seien Sie vorsichtig bei der Verwendung - da es nur String-Ersetzungen durchführt, können Sie am Ende Pfade in anderen Abhängigkeiten ersetzen, wenn sie übereinstimmen.

Das '*' ist in diesem Fall wahrscheinlich nur die Hauptabhängigkeit von pdf.js.

Da ich auch in RequireJS etwas mit der korrekten Referenzierung zu kämpfen hatte, werde ich meine Lösung verlassen, die Teil der RequireJS-Konfiguration ist:

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

Dabei müssen Sie nicht einmal den Pfad zum Worker PDFJS.workerSrc zuweisen, wie in den Beispielen vorgeschlagen , da der Worker automatisch gefunden wird.

Danke @dmaxweiler! Ich hatte mit dem gleichen Problem zu kämpfen - ich hatte Probleme, pdf.js auch bei Verwendung von RequireJS korrekt zu laden. Deine Lösung hat bei mir funktioniert! Fantastisch. Danke für Ihre Hilfe.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

liuzhen2008 picture liuzhen2008  ·  4Kommentare

dmisdm picture dmisdm  ·  3Kommentare

PeterNerlich picture PeterNerlich  ·  3Kommentare

jigskpatel picture jigskpatel  ·  3Kommentare

sujit-baniya picture sujit-baniya  ·  3Kommentare