Frage Fehlenden Bezug zur WebViewer-Instanz für nachträglich definiertes und zu ladendes Dokument herstellen

[petrei86]

Hallo Leute

Ich versuche mich mal wieder mit Javascript, komme aber einfach nicht weiter.
Ich erstelle die Instanz WebViewer und weise diese dem DOM WinRight zu. Danach setze ich mit .then noch das Theme und die Sprache. Soweit funktioniert das alles.

        WebViewer({
            path: '_PlugIn/PdfJsExpress/lib',
            licenseKey: 'xxx',
            disabledElements: [
                'themeChangeButton',
                'fullscreenButton',
                'languageButton'
            ]
        }, document.getElementById('WinRight'))
        .then(instance => {
            instance.UI.setTheme('dark');
            instance.UI.setLanguage('de');   
        });

würde ich nun direkt nach der Sprache noch folgendes einfügen, würde auch das funktionieren.

instance.UI.loadDocument(base64ToBlob('xxxxxxxxxxxxxxxxxxxxxx'), { filename: 'abc.pdf' });

--
Stattdessen will ich aber das zu ladende Dokument nachträglich definieren.

        $(document).on('click', '.Record', function() {
            var FileId = $(this).attr("DocId");           
            $.post("_Action/LoadData.php", { Action:'File', FileId }, function(Feedback) {
                 instance.UI.loadDocument(base64ToBlob(Feedback['FileString']), { filename: Feedback['FileName'] });
            });
        });

Nun fehlt Ihm aber der Bezug zur Instanz WebViewer - Wie stelle ich diesen nun korrekt her?

Danke für eure Hilfe
petrei86

 

[Charly1410]

Hallo @petrei86, deine Frage liegt zwar schon ein paar Tage zurück aber ich will trotzdem versuchen, sie zu beantworten. Ich sehe hier mehrere Möglichkeiten, das Problem zu lösen:

1. Speichere eine Promise auf die instance in einer globalen Variablen und hole die instance später bei Bedarf heraus:

        const promWebViewer = WebViewer({
            path: '_PlugIn/PdfJsExpress/lib',
            licenseKey: 'xxx',
            disabledElements: [
                'themeChangeButton',
                'fullscreenButton',
                'languageButton'
            ]
        }, document.getElementById('WinRight'))
            .then(instance => {
                instance.UI.setTheme('dark');
                instance.UI.setLanguage('de');
                // Die Instanz des Webviewers zurück geben,
                // damit sie in der Promise zur Verfügung steht.
                return instance;
            });

        $(document).on('click', '.Record', function () {
            var FileId = $(this).attr("DocId");
            $.post("_Action/LoadData.php", { Action: 'File', FileId }, function (Feedback) {
                // Wir holen die Instanz des Webviewers aus der Promise:
                promWebViewer.then(instance => {
                    // Hier steht jetzt die Instanz zur Verfügung
                    // und wir können damit arbeiten:
                    instance.UI.loadDocument(base64ToBlob(Feedback['FileString']),
                        {
                            filename: Feedback['FileName']
                        });
                });
            });
        });

2. Alles was die instance benötigt, im then-Callback erledigen:

        WebViewer({
            path: '_PlugIn/PdfJsExpress/lib',
            licenseKey: 'xxx',
            disabledElements: [
                'themeChangeButton',
                'fullscreenButton',
                'languageButton'
            ]
        }, document.getElementById('WinRight'))
            .then(instance => {
                instance.UI.setTheme('dark');
                instance.UI.setLanguage('de');
                $(document).on('click', '.Record', function () {
                    var FileId = $(this).attr("DocId");
                    $.post("_Action/LoadData.php", { Action: 'File', FileId }, function (Feedback) {
                        instance.UI.loadDocument(base64ToBlob(Feedback['FileString']),
                            {
                                filename: Feedback['FileName']
                            });
                    });
                });
            });

3. Mit async-await arbeitn.

Weil ich WebViewer nicht zur Verfügung hatte, ist der Code ungetestet.