PDF.js 页面不会被绘制。只显示白页

Question

我正在尝试使用 PDFJS 在 chrome 中呈现 pdf

这是我正在调用的函数：

open: function pdfViewOpen(url, scale, password) {     
var parameters = {password: password};
if (typeof url === 'string') { // URL
  this.setTitleUsingUrl(url);
  parameters.url = url;
} else if (url && 'byteLength' in url) { // ArrayBuffer
  parameters.data = url;
}

if (!PDFView.loadingBar) {
  PDFView.loadingBar = new ProgressBar('#loadingBar', {});
}

this.pdfDocument = null;
var self = this;
self.loading = true;

getDocument(parameters).then(
  function getDocumentCallback(pdfDocument) {          
    self.load(pdfDocument, scale);
    self.loading = false;
  },
  function getDocumentError(message, exception) {
    if (exception && exception.name === 'PasswordException') {
      if (exception.code === 'needpassword') {
        var promptString = mozL10n.get('request_password', null,
                                  'PDF is protected by a password:');
        password = prompt(promptString);
        if (password && password.length > 0) {
          return PDFView.open(url, scale, password);
        }
      }
    }

    var loadingErrorMessage = mozL10n.get('loading_error', null,
      'An error occurred while loading the PDF.');

    if (exception && exception.name === 'InvalidPDFException') {
      // change error message also for other builds
      var loadingErrorMessage = mozL10n.get('invalid_file_error', null,
                                    'Invalid or corrupted PDF file.');
//#if B2G
//        window.alert(loadingErrorMessage);
//        return window.close();
//#endif
    }

    var loadingIndicator = document.getElementById('loading');
    loadingIndicator.textContent = mozL10n.get('loading_error_indicator',
      null, 'Error');
    var moreInfo = {
      message: message
    };
    self.error(loadingErrorMessage, moreInfo);
    self.loading = false;
  },
  function getDocumentProgress(progressData) {
    self.progress(progressData.loaded / progressData.total);
  }
);
 }

这是电话：

PDFView.open('/MyPDFs/Pdf2.pdf', 'auto', null);

我得到的只是：

如果您注意到，即使是页码也会被检索到，但内容并未绘制在页面中。找不到原因.. 我应该在 PDFView.open 旁边调用任何其他函数吗？

Answer 1

找到解决方案...！ 这是完成工作的代码。

$(document).ready(function () {
        PDFView.initialize();

        var params = PDFView.parseQueryString(document.location.search.substring(1));

        //#if !(FIREFOX || MOZCENTRAL)
        var file = params.file || DEFAULT_URL;
        //#else
        //var file = window.location.toString()
        //#endif

        //#if !(FIREFOX || MOZCENTRAL)
        if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
            document.getElementById('openFile').setAttribute('hidden', 'true');
        } else {
            document.getElementById('fileInput').value = null;
        }
        //#else
        //document.getElementById('openFile').setAttribute('hidden', 'true');
        //#endif

        // Special debugging flags in the hash section of the URL.
        var hash = document.location.hash.substring(1);
        var hashParams = PDFView.parseQueryString(hash);

        if ('disableWorker' in hashParams)
            PDFJS.disableWorker = (hashParams['disableWorker'] === 'true');

        //#if !(FIREFOX || MOZCENTRAL)
        var locale = navigator.language;
        if ('locale' in hashParams)
            locale = hashParams['locale'];
        mozL10n.setLanguage(locale);
        //#endif
        if ('textLayer' in hashParams) {
            switch (hashParams['textLayer']) {
                case 'off':
                    PDFJS.disableTextLayer = true;
                    break;
                case 'visible':
                case 'shadow':
                case 'hover':
                    var viewer = document.getElementById('viewer');
                    viewer.classList.add('textLayer-' + hashParams['textLayer']);
                    break;
            }
        }

        //#if !(FIREFOX || MOZCENTRAL)
        if ('pdfBug' in hashParams) {
            //#else
            //if ('pdfBug' in hashParams && FirefoxCom.requestSync('pdfBugEnabled')) {
            //#endif
            PDFJS.pdfBug = true;
            var pdfBug = hashParams['pdfBug'];
            var enabled = pdfBug.split(',');
            PDFBug.enable(enabled);
            PDFBug.init();
        }

        if (!PDFView.supportsPrinting) {
            document.getElementById('print').classList.add('hidden');
        }

        if (!PDFView.supportsFullscreen) {
            document.getElementById('fullscreen').classList.add('hidden');
        }

        if (PDFView.supportsIntegratedFind) {
            document.querySelector('#viewFind').classList.add('hidden');
        }

        // Listen for warnings to trigger the fallback UI.  Errors should be caught
        // and call PDFView.error() so we don't need to listen for those.
        PDFJS.LogManager.addLogger({
            warn: function () {
                PDFView.fallback();
            }
        });

        var mainContainer = document.getElementById('mainContainer');
        var outerContainer = document.getElementById('outerContainer');
        mainContainer.addEventListener('transitionend', function (e) {
            if (e.target == mainContainer) {
                var event = document.createEvent('UIEvents');
                event.initUIEvent('resize', false, false, window, 0);
                window.dispatchEvent(event);
                outerContainer.classList.remove('sidebarMoving');
            }
        }, true);

        document.getElementById('sidebarToggle').addEventListener('click',
          function () {
              this.classList.toggle('toggled');
              outerContainer.classList.add('sidebarMoving');
              outerContainer.classList.toggle('sidebarOpen');
              PDFView.sidebarOpen = outerContainer.classList.contains('sidebarOpen');
              PDFView.renderHighestPriority();
          });

        document.getElementById('viewThumbnail').addEventListener('click',
          function () {
              PDFView.switchSidebarView('thumbs');
          });

        document.getElementById('viewOutline').addEventListener('click',
          function () {
              PDFView.switchSidebarView('outline');
          });

        document.getElementById('previous').addEventListener('click',
          function () {
              PDFView.page--;
          });

        document.getElementById('next').addEventListener('click',
          function () {
              PDFView.page++;
          });

        document.querySelector('.zoomIn').addEventListener('click',
          function () {
              PDFView.zoomIn();
          });

        document.querySelector('.zoomOut').addEventListener('click',
          function () {
              PDFView.zoomOut();
          });

        document.getElementById('fullscreen').addEventListener('click',
          function () {
              PDFView.fullscreen();
          });

        document.getElementById('openFile').addEventListener('click',
          function () {
              document.getElementById('fileInput').click();
          });

        document.getElementById('print').addEventListener('click',
          function () {
              window.print();
          });

        document.getElementById('download').addEventListener('click',
          function () {
              PDFView.download();
          });

        document.getElementById('pageNumber').addEventListener('change',
          function () {
              PDFView.page = this.value;
          });

        document.getElementById('scaleSelect').addEventListener('change',
          function () {
              PDFView.parseScale(this.value);
          });

        document.getElementById('first_page').addEventListener('click',
          function () {
              PDFView.page = 1;
          });

        document.getElementById('last_page').addEventListener('click',
          function () {
              PDFView.page = PDFView.pdfDocument.numPages;
          });

        document.getElementById('page_rotate_ccw').addEventListener('click',
          function () {
              PDFView.rotatePages(-90);
          });

        document.getElementById('page_rotate_cw').addEventListener('click',
          function () {
              PDFView.rotatePages(90);
          });

        //#if (FIREFOX || MOZCENTRAL)
        //if (FirefoxCom.requestSync('getLoadingType') == 'passive') {
        //  PDFView.setTitleUsingUrl(file);
        //  PDFView.initPassiveLoading();
        //  return;
        //}
        //#endif

        //#if !B2G

        PDFView.open(file, 0);
        //#endif
    });

在调用 PDFView.open 之前必须先初始化系统！ 谢谢