Изображение в div обрезается между страницами при печати - PullRequest
1 голос
/ 13 февраля 2020

как сделать изображение go на следующей странице, когда оно не помещается на странице. Есть ли способ сделать это? Я использую jsreport для создания шаблона. В настоящее время мой div уже go на следующую страницу, если он не помещается на одной странице. поэтому изображение будет следовать за div, но если изображения много, оно не помещается на одной странице, оно будет обрезано.

string+="<tr><td colspan='100%' style='font-size: 10px !important;width: fit-content !important;'>";
        data[index]["Updates"].forEach(function(value2,index2){
            string+="<div class='border mb-1 pt-1 px-2 divSection'><div class= 'row mb-1'>" +
            "<div class='col'>("+value2["Category"]+") \xa0\xa0\xa0\xa0\xa0\xa0\xa0"+value2["Datetime"]+"\xa0\xa0\xa0\xa0\xa0\xa0\xa0 "+value2["Commented By"]+"</div>"+
            "</div>" +
            "<div class= 'row mb-1'>" +
            "<div class='col'>"+value2["Asset"]+"</div>"+
            "</div>" +
            "<div class= 'row mb-2'>" +
            "<div class='col'>"+value2["Comment"]+"</div>"+
            "</div>" +
            "<div class= 'row mb-1'>" ;
            for (var i = 0; i < value2["Attch."].length; i++){
                string+="<div class='col-3  d-flex justify-content-between pt-1 picSection'><img class='picSection' src='"+value2["Attch."][i]+"' min-height='35%' width='100%'></div>";
            }
            string+="</div></div>";
            // string+=""+value2["Datetime"]+"";
        })

    string+="</td></tr>";
    })
 @media print  
            {
                .divSection{
                    page-break-inside: avoid;
                }
                .picSection{
                    page-break-inside: avoid;
                    overflow: hidden !important;
                }
            }
            @media print{@page 
                {
                    size: landscape;
                }
            }

            img {
                max-width:230px;
                max-height:230px;
                width: auto;
                height: auto;
            }

This is an example image that being cut off

...