Pdf Определение ориентации и ширины страницы - PullRequest
0 голосов
/ 30 января 2019

Я использую pdf.js для отображения PDF на холсте, как показано ниже.У меня есть 2-4 страницы, которые находятся в альбомном режиме, и мне нужно их обнаружить и соответственно отобразить на холсте.

Это мой код:

 <div class="pdfholder">
      <div id="pdf-container" class="container"></div>
 </div>

Сценарий:

var loadingTask = PDFJS.getDocument(this.url);
    loadingTask.promise.then(function (pdf) {
        var scale = 1;
        inst.number_of_pages = pdf.pdfInfo.numPages;

        if (window.matchMedia('(max-width: 544px)').matches) {
            scale = 0.3;
        } else if (window.matchMedia('(max-width: 768px)').matches) {
            scale = 0.4;
        } else if (window.matchMedia('(max-width: 992px)').matches) {
            scale = 1.5;
        }


        for (var i = 1; i <= pdf.pdfInfo.numPages; i++) {
            pdf.getPage(i).then(function (page) {
                var viewport = page.getViewport(scale);
                var canvas = document.createElement('canvas');
                document.getElementById(inst.container_id).appendChild(canvas);
                canvas.className = 'pdf-canvas';
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                context = canvas.getContext('2d');

                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                var renderTask = page.render(renderContext);
                renderTask.then(function () {
                    $('.pdf-canvas').each(function (index, el) {
                        $(el).attr('id', 'page-' + (index + 1) + '-canvas');
                    });
                    inst.pages_rendered++;
                    if (inst.pages_rendered == inst.number_of_pages) inst.initFabric();
                });
            });
        }
    }, function (reason) {
        console.error(reason);
    });

Рабочий стол:

enter image description here

MobileView:

enter image description here

...