1

Estou tentando criar um modelo para geração de PDF, que vai servir para etiqueta do pedido.

Resultado do que fiz

inserir a descrição da imagem aqui Queria estrutura tudo no devido local. Como é PDF, não posso usar Boostrap ou qualquer outro facilitador, apenas codigo HTML e CSS.

<style>
    .conteudo {
        font-size: 10px;
    }
    .destaque-1 {
        font-size: 14px;
        line-height: 2px;
    }
    .destaque-2 {
        line-height: 2px;
    }
    .destaque-3 {
        font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
        line-height: 2px;
    }
    .tabela-de-nutrientes{
        float: right;
    }
    tr,td {
        border: 1px solid #0a0a0a;
    }
    .qrcode{

    }
</style>
<div class="conteudo">

    {{-- Dados do cliente / pedido / produto --}}
    <div class="pedido">
        <p class="destaque-1">{{ $item->product->name }}</p>
        <p class="destaque-2">{{ $item->order->client->user->name }}</p>
        <p class="destaque-3">{{ $item->order->id }}</p>
    </div>
    {{-- Dados do cliente / pedido / produto --}}


    {{-- Dados Nutricionais // Inicio --}}
    <table class="tabela-de-nutrientes" cellspacing="0">
        <tr>
            <th colspan="2">Quantidade Por Porção: 100G (1 Porção)</th>
        </tr>
        @foreach($item->product->nutrients as $nutrient)
            <tr>
                <td>{{$nutrient->name}}</td>
                <td>{{$nutrient->pivot->amount}} {{$nutrient->unity}}</td>
            </tr>
        @endforeach

    </table>
    {{-- Dados Nutricionais // Fim --}}


    {{-- Ingredientes ou Componentes // Inicio--}}
    <div class="ingredientes-componentes">
        <p> ingredientes: lorem ipsum, lorem ipsum </p>
    </div>
    {{-- Ingredientes ou Componentes // Fim--}}

    <div>
        <p>peso: 300g</p>
    </div>

    {{-- QRCODE --}}
    <img class="qrcode" src="data:image/png;base64, {{ $qrcode }} ">
    {{-- QRCODE --}}


    {{-- conservação // Inicio--}}
    <div>
        <p class="destaque-1">Conservação</p>
        <p class="destaque-3">A partir da data de fabricação, consumir em até:</p>
        <table>
            <tr>
                <td> GELADEIRA </td>
                <td> 6 Dias </td>
            </tr>
            <tr>
                <td> FREEZER </td>
                <td> 6 Meses </td>
            </tr>
        </table>
    </div>
    {{-- conservação // Fim  --}}

    {{-- Fabricacao --}}
    <div>
        <p class="destaque-2">Data de Fabricação:</p>
        <p>{{ $item->created_at->format('d/m/y') }}</p>
    </div>
</div>

9
  • Amigo o ideal é que vc poste um wireframe pelo menos, definindo as regiões que vc precisa etc... Da forma como vc desenhou ficou um pouco confuso...
    – hugocsl
    Commented 5/11/2018 às 18:04
  • Editei para voce vê como é para ficar. Commented 5/11/2018 às 18:07
  • como eu reduzo o espaço de dentro das celular da table. Commented 5/11/2018 às 18:09
  • Seu HTML não parece ser apenas HTML. Poderia elaborar um Exemplo Mínimo, Completo e Verificável?
    – Woss
    Commented 5/11/2018 às 18:14
  • Reduzir o espaço? No que vc se refere? Se for sobre a borda use border-collapse: collapse; na table Mas de qualquer forma eu não te indico fazer esse layout com Tabela. O mais correto seria com display Flex ou Grid
    – hugocsl
    Commented 5/11/2018 às 18:14

1 Resposta 1

1

Existem várias formas para fazer esse layout, aqui tem uma opção simples feita com CSS Grid, aqui tem um Guia completo bom didático: https://css-tricks.com/snippets/css/complete-guide-grid/

Primeiro coloque o .conteiner com 100% de altura com height:100%

Depois repare que eu determino quantas colunas vão ter no grid, no caso dividi em 4 colunas de tamanho iguais 1fr

grid-template-columns: repeat(4, 1fr);

Agora as fileiras, dividi em 3 fileiras de tamanho iguais 1fr

grid-template-rows: repeat(3, 1fr);

Agora eu determino as áreas que cada section vai ocupar com

grid-template-areas: 
    "nome nome tabela tabela"
    "ingre qr tabela tabela"
    "peso info cons data";

Para isso funcionar vc precisa declara o grid-area: nome; para cada section

.nome {
    grid-area: nome;
}

Pronto seu Grid está 100% responsivo

inserir a descrição da imagem aqui


Veja o código utilizado para ter o resultado da imagem acima:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: 
    "nome nome tabela tabela"
    "ingre qr tabela tabela"
    "peso info cons data";
}
.nome {
    grid-area: nome;
}
.tabela {
    grid-area: tabela;
}
.ingre {
    grid-area: ingre;
}
.qr {
    grid-area: qr;
}
.peso {
    grid-area: peso;
}
.info {
    grid-area: info;
}
.cons {
    grid-area: cons;
}
.data {
    grid-area: data;
}
section {
  box-sizing: border-box;
  border: 1px solid;
}
<div class="container">
  <section class="nome">nome</section>
  <section class="tabela">tabela</section>
  <section class="ingre">ingre</section>
  <section class="qr">qr</section>
  <section class="peso">peso</section>
  <section class="info">info</section>
  <section class="cons">cons</section>
  <section class="data">data</section>
</div>

2
  • 1
    Deu certo eu fragmentar, achei sua resposta muito massa. Valeu. Como é para PDF, ele não pega o css, ai no caso tenho que fazer pela função dentro dele, do TCPDF usando o HTMLWRITECELL para criar. Commented 6/11/2018 às 23:21
  • 1
    @RomuloSousa não sabia que a API tinha essas particularidades, mas que bom que deu certo ai! Tmj
    – hugocsl
    Commented 6/11/2018 às 23:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .