Lista de impressão desalinhada

Front-end
, , ,
#1 
const htmlContent = `
      <html>
        <head>
          <style>
            body {
              display: grid;
              grid-template-columns: auto auto auto;
            }
            .card {
              height: 300px;
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              text-align: center;
              page-break-inside: avoid;
            }
            .card-title {
              color: ${themes.COLORS.GREEN_DARK};
            }
            img {
              align-self: center;
              width: 140px;
              height: 140px;
              margin-bottom: 5px;
            }
          </style>
          <title>Meta Collect</title>
        </head>
        <body>
          ${qrCodeImages
            .map(
              ({ current, dataUrl }) => `
               <div class="card">
                  <h5 class="card-title">IDENTIFICAÇÃO DE TANQUE</h5>
                  <img src="${dataUrl}" alt="${current.DFDESCTANQUE}" />
                  <span>${current.DFDESCTANQUE}</span>
               </div>
              `,
            )
            .join('')}
        </body>
      </html>
    `;

eu crio esse html para impressão, porém quando eu tenho 4,5 ou 6 itens dentro do qrCodeImages o layout fica assim durante a impressão

image

quando passa de 7 itens para frente o problema some e mesmo quando tem uma nova pagina com a mesma quantidade de itens ele não apresenta esse erro

image

#2

vc tem outra estilização? pode ser que esteja com ‘conflito’ com algum height 100%

#3

Não só tem isso mesmo, vou te mandar a string

const htmlContent = `
      <html>
        <head>
         <style>
body {
              display: grid;
              grid-template-columns: auto auto auto;
            }
            .card {
              height: 300px;
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              text-align: center;
              page-break-inside: avoid;
            }
            .card-title {
              color: ${themes.COLORS.GREEN_DARK};
            }
            img {
              align-self: center;
              width: 140px;
              height: 140px;
              margin-bottom: 5px;
            }
<style/>
          <title>Meta Collect</title>
        </head>
        <body>
          ${qrCodeImages
            .map(
              ({ current, dataUrl }) => `
               <div class="card">
                  <h5 class="card-title">IDENTIFICAÇÃO DE TANQUE</h5>
                  <img src="${dataUrl}" alt="${current.DFDESCTANQUE}" />
                  <span>${current.DFDESCTANQUE}</span>
               </div>
              `,
            )
            .join('')}
            ${validEmpty()}
        </body>
      </html>
    `;
#4

Troca seu trecho acima, pra esse:

      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;

E ajusta esse <style/> pra </style>

#5

consegui arrumar de outra forma

  <style>
    body {
      display: grid; 
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }
    .card{
      border: 1px solid black;
      height: 335px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      page-break-inside: avoid;
    }
    .card-title {
      color: ${themes.COLORS.GREEN_DARK};
    }
    img {
      align-self: center;
      width: 140px;
      height: 140px;
      margin-bottom: 5px;
    }
    .card-footer{
      height: 30px;
      width: 100%;
      background-color: blue;
    }
    </style>

mas to achando engraçado to tentando por uma cor de bakground e na hora de imprimri ele vai sem cor

image
image1188×708 102 KB

#6

vai em “Mais opções” e habilita o Background graphics, eu removeria o headers and footers, mas aí vc q manda tb

image