1

这似乎应该是非常标准的行为。

我可以显示一个可滚动的 PDF：

var container = document.getElementById('viewerContainer');
var pdfViewer = new PDFJS.PDFViewer({
    container: container,
});
PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) {
    pdfViewer.setDocument(pdfDocument);
});

我可以通过以下方式逐页显示 PDF：

PDFJS.getDocument(URL_ANNOTATED_PDF_EXAMPLE).then(function getPdfHelloWorld(pdf) {
    pdf.getPage(pageNumber).then(function getPageHelloWorld(page) {
        var scale = 1.5;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });

但似乎无法在 API 中找到任何引用来允许滚动和跳转到特定页面，此外：

pdfViewer.currentPageNumber = 3;

这不起作用...

4

1 回答 1

1

所以我找到了一种方法来完成这项工作（与一些 Angular 代码混合，“$scope.$watch...”）我现在在字体解码方面遇到了其他问题。但这是一个可能对其他人有帮助的解决方案。

var me = this;
PDFJS.externalLinkTarget = PDFJS.LinkTarget.BLANK;
var container = document.getElementById('capso-court-document__container');


function renderPDF(url, container) {

    function renderPage(page) {
        var SCALE = 1;
        var pdfPageView = new PDFJS.PDFPageView({
            container: container,
            id: page.pageIndex + 1,
            scale: SCALE,
            defaultViewport: page.getViewport(SCALE),
            textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
            annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
        });
        pdfPageView.setPdfPage(page);
        return pdfPageView.draw();
    }
    function renderPages(pdfDoc) {
        var pageLoadPromises = [];
        for (var num = 1; num <= pdfDoc.numPages; num++) {
            pageLoadPromises.push(pdfDoc.getPage(num).then(renderPage));
        }
        return $q.all(pageLoadPromises);
    }

    PDFJS.disableWorker = true;

    return PDFJS.getDocument(url)
        .then(renderPages);
}

$scope.$watch(function() {
    return {
        filingUrl: me.filingUrl,
        whenPageSelected: me.whenPageSelected,
    };
}, function(newVal, oldVal) {
    if (newVal.filingUrl) {
        //newVal.filingUrl = URL_EXAMPLE_PDF_ANNOTATED;
        //newVal.filingUrl = URL_EXAMPLE_PDF_ANNOTATED_2;
        //newVal.filingUrl = URL_EXAMPLE_PDF_MULTI_PAGE;

        if (newVal.filingUrl !== oldVal.filingUrl &&
            newVal.whenPageSelected &&
            newVal.whenPageSelected.page) {
            scrollToPage(newVal.whenPageSelected.page);
        }
        //HACK - create new container for each newly displayed PDF
        container.innerHTML = '';
        var newContainerForNewPdfSelection = document.createElement('div');
        container.appendChild(newContainerForNewPdfSelection);
        renderPDF(newVal.filingUrl, newContainerForNewPdfSelection).then(function() {
            if (newVal.whenPageSelected && 
                newVal.whenPageSelected.page) {
                scrollToPage(newVal.whenPageSelected.page);
            }
        });
    }
}, true);

function scrollToPage(pageNumber) {
    var pageContainer = document.getElementById('pageContainer' + pageNumber);
    if (pageContainer) {
        container.scrollTop = pageContainer.offsetTop;
    } else {
        console.warn('pdf pageContainer doesn\'t exist for index', pageNumber);
    }
}
于 2016-06-07T15:16:56.320 回答