Как уместить данные Dynami c на страницу формата A4 html - PullRequest
Новая
       153

Как уместить данные Dynami c на страницу формата A4 html

0 голосов
/ 14 июля 2020

Я очень долго зацикливался на этой проблеме и пытаюсь найти лучший способ изменить свой код. Я использую ручки для отображения вводимых пользователем данных, которые могут варьироваться от 1 абзаца до n строк в отчете в формате PDF. Отчет в формате pdf создается с помощью puppeteer, который преобразует HTML, сгенерированный ручками, в страницы разного размера a4. В CSS есть тег, который имеет размеры страницы формата А4. В настоящее время я помещаю все данные в один тег и закрываю его. Но когда данных слишком мало, страница выглядит пустой, а когда данные слишком велики, она просто разливается и выглядит скрытой для пользователя. Я прикрепил код CSS с разрывом страницы.

Есть от трех до четырех пользовательских входов, подобных этому, и я хочу, чтобы все они объединялись и выглядели непрерывно.

Мои Код js внутри помощника руля в настоящее время выглядит следующим образом для одного из входных данных: 

      i = 0;
        let myLines = inputData
            .split(" ")
            .splice(i, 15)
            .join(" ");
        Page += `<section class="sheet"> <main class="main main--lg main--top"><p><h2 class="main__title color-primary">User Input</h2><p>`;
        while (inputData) {
            if (i != 0 && i % 600 == 0) {
                Page += `</section><section class="sheet"> <main class="main main--lg main--top"><p>`;
            }
            Page += `<span class = "break-line">${myLines} </span>`;
            i = i + 15;
            myLines = userData
                .split(" ")
                .splice(i, 15)
                .join(" ");
        }
        Page += `</section>`;
    }

CSS раздела, который вызывается для добавления разрывов страниц: 

.sheet {
    margin: 0;
    overflow: hidden;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    page-break-after: always;
}

body.A4 .sheet {
    width: 210mm;
    height: 297mm;
}

@media screen {
    body {
        background: #e0e0e0;
    }
    .sheet {
        background: white;
        -webkit-box-shadow: 0 0.5mm 2mm rgba(0, 0, 0, 0.3);
        box-shadow: 0 0.5mm 2mm rgba(0, 0, 0, 0.3);
        margin: 5mm;
    }
}
...