avoid moving img by page break

46 views Asked by At

I need to generate pdf with endless page heigh. Content should be one under another without any space or break. Im using dinkToPdf to generate pdf with images but when img is on the end of the page it is translated to next page and it is leaving big empty space on the first page. Difference in distance between T: and barcode I have stricted sizes of each part and translating img is changing it and overlaying on next part.

it is my single item html code

<div class="body">
    <div class="top">
        <div class="top-left">
            @leftIconImage
        </div>
        <div class="top-middle">
            <div class="top-middle-top" style="background-color: @areaColor">
                <div class="top-middle-top-left">
                    <p class="p-left-8">@partName</p>
                </div>
                <div class="top-middle-top-right">
                    <p class="p-right-8 t-a-right">@areaName</p>
                </div>
            </div>
            <div class="top-middle-bottom">
                <p class="p-left-8">INFO: @labelInfo</p>
            </div>
        </div>
        <div class="top-right">
            @rightIconImage
        </div>
    </div>
    <div class="middle">
        <div class="middle-top">
            <p class="t-a-center" style="color: @areaColor">@labelCode</p>
        </div>
        <div class="middle-bottom">
            <div class="middle-bottom-left">
                <p class="p-left-8">ON: @orderNr</p>
                <p class="p-left-8">OI: @orderItem</p>
                <p class="p-left-8">T: @labelTag</p>
            </div>
            <div class="middle-bottom-right">
                <p class="p-right-8 t-a-right">Qty: @quantity</p>
                <p class="p-right-8 t-a-right">D: 654321-321</p>
            </div>
        </div>
    </div>
    <div class="bottom">
        @barcodeImage
    </div>
</div>

and its css

.body {
    height: 380px;
    width: 500px;
    border: 1px solid orange;
    font-family: arial;
    margin: auto;
}

/* TOP */

.top {
    width: 500px;
    height: 64px;
    padding-bottom: 5px;
    margin: auto;
}

.top-left {
    display: table-cell;
    width: 64px;
    height: 64px;
    background-color: orange;
}

.top-middle {
    display: table-cell;
    vertical-align: middle;
    width: 372px;
    height: 64px;
}

.top-right {
    display: table-cell;
    width: 64px;
    height: 64px;
    background-color: orange;
}

.top-middle-top {
    display: inline-block;
    width: 372px;
    height: 32px;
    font-size: 12px;
    font-weight: bold;
    color: white;
}

.top-middle-top-left {
    float: left;
    width: 186px;
    height: 32px;
}

.top-middle-top-right {
    float: right;
    width: 186px;
    height: 32px;
}

.top-middle-bottom {
    display: inline-block;
    width: 372px;
    height: 32px;
    font-size: 15px;
}

.icon-img {
    width: 64px;
    height: 64px;
}

/* MIDDLE */

.middle {
    display: table-cell;
    vertical-align: middle;
    width: 500px;
    height: 100px;
    padding-bottom: 35px;
}

.middle-top {
    width: 500px;
    height: 50px;
    font-weight: bold;
    font-size: 40px;
}

.middle-bottom {
    display: inline-block;
    width: 500px;
    height: 50px;
    font-size: 16px;
}

.middle-bottom-left {
    float: left;
    width: 250px;
    height: 50px;
}

.middle-bottom-right {
    float: right;
    width: 250px;
    height: 50px;
}

.middle-bottom p {
    margin: 5px 0; /* Dodane marginesy na górze i na dole */
    line-height: 1; /* Ustawienie odstępu między wierszami na minimalny */
}


/* BOTTOM */

.bottom {
    display: inline-block;
    margin: auto;
    width: 500px;
    height: 160px;
    padding-bottom: 20px;
    margin: auto;
}

.barcode-img {
    display: block;
    max-width: 480px;
    max-height: 160px;
    margin-left: auto;
    margin-right: auto;
}

.p-left-8 {
    padding-left: 8px;
}

.p-right-8 {
    padding-right: 8px;
}


.t-a-right {
    text-align: right;
}

.t-a-center {
    text-align: center;
}

im replacing values in html with the one i need

 private List<string> CreateLabelItems(GenerateLabelCodeQuery request, LabelEntity label, string singleItem, Bitmap barcode, List<string> labelsHtml)
        {
            var byteArray = _fileService.ConvertBitmapToByteArray(barcode);
            string base64String = Convert.ToBase64String(byteArray);
            string barcodeHtml = $"<img class=\"barcode-img\" src='data:image/png;base64,{base64String}' alt=\"barcode\" />";

            for (int j = 1; j <= request.Quantity; j++)
            {
                string labelHtml = new LabelPdfBuilder()
                    .WithTemplate(singleItem)
                    .SetParameter("@leftIconImage", label.LeftIcon != null ? $"<img src=\"{label.LeftIcon.Filepath}\" class=\"icon-img\" alt=\"right icon\">" : "")
                    .SetParameter("@rightIconImage", label.RightIcon != null ? $"<img src=\"{label.RightIcon.Filepath}\" class=\"icon-img\" alt=\"right icon\">" : "")
                    .SetParameter("@barcodeImage", barcodeHtml)
                    .SetParameter("@areaColor", label.Section.Area.Color)
                    .SetParameter("@partName", label.CodeType != null ? label.CodeType.Name : label.PartName)
                    .SetParameter("@areaName", label.Section.Area.Name)
                    .SetParameter("@labelInfo", label.Description ?? "")
                    .SetParameter("@labelCode", label.Code)
                    .SetParameter("@labelTag", label.Tag ?? "")
                    .SetParameter("@orderNr", label.OrderNr ?? "")
                    .SetParameter("@orderItem", label.OrderItem ?? "")
                    .SetParameter("@quantity", $"{j}/{request.Quantity}")
                        .Build();

                labelsHtml.Add(labelHtml);
                label.PrintingCount++;
            }

            return labelsHtml;
        }

and then sum them into one string

private static async Task<string> GetLinePdfTemplate(PrintingInfo printingInfo, List<string> labelsHtml)
        {
            string template = "";
            foreach (string label in labelsHtml)
            {
                template += label;
            }
            LabelPdfBuilder pdfTemplate = new LabelPdfBuilder().WithTemplate(template);

            return pdfTemplate.Build();
        }

next i convert it into pdf and byte[]

string html;
            if ((int)request.Size>2)
                html = await GetLinePdfTemplate(printingInfo, labelsHtml);
            else 
                html = await GetPdfTemplate(printingInfo, labelsHtml);
            byte[] fileBytes = _pdfService.GetLabelPdfBytesArray(html, printingInfo.TemplateStylePath, (int)request.Size);

with this function

        public byte[] GetLabelPdfBytesArray(string html, string stylesPath, int size = 0)
        {
            var small = new MarginSettings() { Top = 10.4, Bottom = 10.4, Left = 10, Right = 10 };
            var medium = new MarginSettings() { Top = 8, Bottom = 8, Left = 0, Right = 0 };
            var normal = new MarginSettings() { Top = 0, Bottom = 0, Left = 0, Right = 0 };

            var htmlToPdf = new HtmlToPdfDocument()
            {
                GlobalSettings = {
                    ColorMode = DinkToPdf.ColorMode.Color,
                    Orientation = Orientation.Portrait,
                    PaperSize = PaperKind.A4,
                    Margins = size==0 ? small : size==1? medium: normal,
                },
                Objects = {
                    new ObjectSettings() {
                        HtmlContent = html,
                        WebSettings = {
                            DefaultEncoding = "utf-8",
                            UserStyleSheet = stylesPath
                        }
                    }
                }
            };
            return _converter.Convert(htmlToPdf);
        }

I was trying to set body heigh to 1000000000000 but it didnt work.

0

There are 0 answers