Angular 带有 PDFTron 的 JS

Question

我正在尝试将 blob 作为 URL 但我在这一行收到错误：

xhr.send()

错误信息是angular.js:13920 Error: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.

但在我使用的代码中 xhr.open('GET', blobValue) 如我此处的代码所示

                if(someBlobValue){
                    var viewerElement = $document[0].getElementById('viewer');
                    var myWebViewer = new PDFTron.WebViewer({
                        path: 'lib',
                        pdftronServer: 'https://demo.pdftron.com' // remove
                    }, viewerElement);

                    var xhr = new XMLHttpRequest;
                    xhr.responseType = 'blob';

                    xhr.onload = function() {
                        var recoveredBlob = xhr.response;

                        var reader = new FileReader;

                        reader.readAsDataURL(recoveredBlob);
                    };

                    xhr.open('GET', someBlobValue);
                    xhr.setRequestHeader('Content-type', 'application/pdf');
                    xhr.send(); //error here although its open?
                    //var file = new File([newValue], 'somefile.pdf');
                    myWebViewer.loadDocument(xhr.response, { filename: 'somefile.pdf'});

目前我有一个 blob 文档，但我正在尝试将它加载到 pdftron 库，不幸的是我似乎没有在 DOM 中找到 myWebViewer.getInstance().loadLocalFile 方法（它未定义）。

第一次尝试在 angularjs 应用程序中使用 pdftron，如有任何指点，我们将不胜感激。

注意：这是在指令中。

Answer 1

您需要等待包含 WebViewer 的 DOM 元素触发 ready 事件，以便定义从 getInstance() 返回的 ReaderControl 实例。

例如：

$(viewerElement).on('ready', function() {
  myWebViewer.getInstance().loadLocalFile(someBlobValue);
});

Answer 2

你的代码逻辑上没有问题，

您刚刚忘记在此处实例化 XHR 对象 var xhr = new XMLHttpRequest;。
您可以通过这样做来更正它var xhr = new XMLHttpRequest();

Angular 带有 PDFTron 的 JS

Angular JS with PDFTron

javascript

angularjs

pdftron

你的代码逻辑上没有问题，