Нужен совет от опытных, чайнику

196

17 декабря 2019, 12:20

Всем доброго времени суток. Есть Div(1) С заданным размером 210Х297mm A4 Div(1) в цикле заполняется другими Div(2) с плавающим размером 80Х80, 60Х40, 80Х60мм и т.д. Как сделать если div(2) не вмещаются по количеству, создать 2-ой div(1) и перенести не вместившиеся div(2).

Суть программа печати этикеток.

<div(1)>
 <?php for ($i=0; $i < (количество постоянно меняется); $i++) {
  require "layout/div(2).php";
 } ?>
</div>

База заполняется данными => данные в цикле заполняют этикетки (попутно заполняя форму для печати).

Все работает, проблема именно в выводе на печать. Заранее прощу не кидать тапками. Я только учусь.

Answer 1

Если заранее размер не известен, то скорее всего через PHP это не удастся.
Но в любом случае - зачем перекладывать на сервер работу, которую проще реализовать на клиенте?
К тому же, запрашивать этикетки лучше асинхронно XMLHttpRequest.
Приведу самый простой пример, по хорошему здесь надо реализовать логику заполнения листов в зависимости от размеров картинок, т.е. не по порядку, а именно максимальное заполнение площади с целью экономии листа. На картинке то у вас все ровненько, а в условии - этикетки имеют рандомные размеры.

function rundomMinMax ( min, max ) { 
    return Math.floor( Math.random() * ( ++max - min ) ) + min; 
} 
 
function create ( width, height ) { 
    var d = document.createElement( 'div' ); 
    d.style.width = width + 'mm'; 
    d.style.height = height + 'mm'; 
    d.style.margin = '10mm'; 
    d.style.display = 'inline-block'; 
    d.style.backgroundColor = 'red'; 
    return d; 
} 
 
function createList ( arr ) { 
    var d = document.createElement( 'div' ); 
    d.style.width = '210mm'; 
    d.style.height = '297mm'; 
    d.style.margin = '10mm'; 
    d.style.backgroundColor = '#FFEB3B'; 
    arr.forEach( i => d.appendChild( i ) ); 
    return d; 
} 
 
function clear () { 
    return document.createElement( 'div' ); 
} 
 
var to = document.getElementById( 'to' ); 
var from = document.getElementById( 'from' ); 
 
// просто сгенерим сто картинок, типа это с сервера пришло в from 
void function ( ) { 
    var count = 100; 
    var min = 4, max = 8; 
    while ( count-- ) { 
        from.appendChild( create( rundomMinMax( min, max ) * 10, rundomMinMax( min, max ) * 10 ) ); 
    } 
}(); 
 
// сразу определим коэффициент относительно mm 
var cf = Number.parseInt( window.getComputedStyle( from.firstChild ).margin.replace( 'px', '' ), 10 ) / 10; 
console.log( 'mm->px', cf ); 
 
 
function getRow () { 
    var arr = [ ], r, mh = 0, h, w = 0; 
    while ( from.firstChild ) { 
        r = from.firstChild.getBoundingClientRect(); 
        h = r.height / cf + 20; 
        if ( mh < h ) { 
            mh = h; 
        } 
        w += r.width / cf + 20; 
//        console.log( 'mh', mh, ' w', w ); 
        if ( w > 209 ) { 
            arr.push( clear() ); 
            break; 
        } 
        arr.push( from.removeChild( from.firstChild ) ); 
    } 
    return [ arr, mh ]; 
} 
 
var rowOld; 
 
function getList () { 
    var arr = [ ], r, h = 0; 
    if ( rowOld ) { 
        [ ].push.apply( arr, rowOld[0] ); 
        h = rowOld[1]; 
        rowOld = null; 
    } 
    while ( from.firstChild ) { 
        r = getRow(); 
        h += r[1]; 
//        console.log( 'r', r, ' h', h ); 
        if ( h > 296 ) { 
            rowOld = r; 
            break; 
        } 
        [ ].push.apply( arr, r[0] ); 
    } 
    return arr; 
} 
 
 
var countList = 0; 
// просто переносим картинки 
while ( from.firstChild ) { 
    ++countList; 
    to.appendChild( createList( getList() ) ); 
} 
if ( rowOld ) { 
    ++countList; 
    to.appendChild( createList( rowOld[0] ) ); 
} 
console.log( 'countList', countList );

<div id="to"></div> 
<div id="from"></div>

Смотреть лучше на полном экране - большие размеры.

Answer 2

можете попробовать решить как то так:

<?
    $amount = "Количество";
    $blocksAmount = ceil($amount / 4);
    for ($j = 0; $j < $blocksAmount; $j++) {
?>
<div>
<?
        for ($i = $j * 4;  $i < ($j * 4) + 4; $i++) {
            require "layout/div(2).php";
        }
?>
</div>
<?
    }
?>