текст не отображается должным образом на холсте с использованием pdf.js - PullRequest
Новая
       33

текст не отображается должным образом на холсте с использованием pdf.js

2 голосов
/ 24 марта 2019

Я пытаюсь отобразить PDF-страницы на нескольких холстах, но текст отображается неправильно при рендеринге.

Я искал ту же проблему.Но ни один из них не решает мою проблему.

Вот пример:

here an example

Вот еще один: enter image description here

Код JS 

 <script>
    console.log("hi")
    pdfjsLib.getDocument("{{ object.pdf.url }}").then(doc => {
        pdfFile = doc
        for (var i = 1; i <= 4; i++) {
            var canvas = document.getElementById('canvas' + i);
            var context = canvas.getContext('2d');
            context.font="25px Verdana";

            pdfjsLib.disableStream = true;
            openPage(doc, i, context);
        }
    })

    function openPage(pdfFile, pageNumber, context) {
        var scale = 5;
        pdfFile.getPage(pageNumber).then(function (page) {
            viewport = page.getViewport(scale);
            // reference canvas via context
            var canvas = context.canvas;
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            canvas.style.width = "100%";
            canvas.style.height = "100%";
            var renderContext = {
                canvasContext: context
                , viewport: viewport
            };
            page.render(renderContext);
        });
    }

</script>

pdf.js 

 <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>

html-код 

   <canvas id="canvas1" width="700" height="300"></canvas>
   <canvas id="canvas2" width="500" height="300"></canvas>
   <canvas id="canvas3" width="500" height="300"></canvas>
   <canvas id="canvas4" width="500" height="300"></canvas>
...