Question

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

我可以用：

显示可滚动的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;

哪个不起作用......

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

对于嵌入式PDF，PDFJS可以同时支持滚动和跳转到页码吗？

1 个答案: