Почему многостраничная генерация PDF с приборной панели Banana Solr приближается к Pixelwise - PullRequest
Новая
       43

Почему многостраничная генерация PDF с приборной панели Banana Solr приближается к Pixelwise

0 голосов
/ 22 января 2019

Я работаю над многостраничной загрузкой PDF с использованием html2canvas и pdfmake. Я могу загрузить pdf, но высота страницы, ширина сгенерированного pdf неверна, а разрешение низкое / размытие. Код как ниже. Пожалуйста, обратитесь к скриншоту, приложенному здесь.

Заранее спасибо.

Код, который я использовал: 

html2canvas(document.getElementById('newId')).then(
        canvas=>{
            var image = canvas.toDataURL('image/png');
            const PAGE_WIDTH = 500; 
            const PAGE_HEIGHT = 700;  
            const content = [];
            var w=500;
            var h=700;
            function getPngDimensions (base64) {
                    const header = atob(base64.slice(22, 70)).slice(16, 24);
                 const uint8 = Uint8Array.from(header, c => c.charCodeAt(0));
                 const dataView = new DataView(uint8.buffer);
                 return {
                         width: dataView.getInt32(0),
                          height: dataView.getInt32(4)
                 };
            }
            const splitImage = (img, content, callback) => () => {
                    const canvas = document.createElement('canvas');
                canvas.width = w*2;
                canvas.height=h*2;
                canvas.style.width=w+'px';
                canvas.style.height=h+'px';
                const ctx    = canvas.getContext('2d');
                ctx.scale(2,2);
                const printHeight = img.height * PAGE_WIDTH / img.width;
                for (let pages = 0; printHeight > pages * PAGE_HEIGHT; pages++) {
                        canvas.height = Math.min(PAGE_HEIGHT, printHeight - pages * PAGE_HEIGHT);
                        ctx.drawImage(img, 0, -pages * PAGE_HEIGHT, img.width, printHeight);
                                content.push({ image: canvas.toDataURL(), margin: [0, 5],width:PAGE_WIDTH });
                    }

                    callback();
            };

            function next () {
                    pdfMake.createPdf({ content }).open();
            }
            const { width, height } = getPngDimensions(image);
            const printHeight = height * PAGE_WIDTH / width;
            if (printHeight > PAGE_HEIGHT) {
            const img = new Image();
            img.onload = splitImage(img, content, next);
            img.src = image;
            return;
            }
            content.push({ image, margin: [0, 5], width: PAGE_WIDTH });
            next();

        }
            );

Обновление: Я попытался обновить ширину и высоту изображения, сформированного холстом, но увеличение ширины только увеличивает размер пикселя и дополнительно обрезает правый конец панели. 

const PAGE_WIDTH = 500; 
const PAGE_HEIGHT = 700;  
//some more code here as mentioned in the detailed snippet
const content = [];
var w=500;
var h=700;

Плохой пиксельный дисплей для многостраничного PDF через панель бананов

...