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 に答える