0

Boa noite pessoal.

Eu estou utilizando o summernote pra criar/gerenciar textos, e gero pdf usando a biblioteca MPDF. Porém os alinhamentos, (left, center e right), quando usados das células de uma tabela, não são passados pro MPDF, enquanto está no HTML, ou mesmo na tela de impressão funciona perfeitamente.

Um exemplo simples de tabela

<tbody>
  <tr>
    <td><p><span >CPF/CNPJ</span></p>
       <p style="text-align: center; "><span style="font-size: 12px;">123.123.123-12</span></p>
    </td>
    <td>
       <p><span style="font-size: 14px;">RG/Insc.Estadual</span></p>
       <p style="text-align: center; "><span style="font-size: 12px;">123456789</span></p>
    </td>
   </tr>
</tbody>

Nesse caso, no HTML ta legal, no PDF ele fica todo alinhado pra esquerda.

Encontrei no site do MPDF que é uma limitaçãos, onde tags de bloco (div, p, etc) não são aceitos.

Tables
Block elements (e.g. DIV or P) are not supported inside tables. The content is displayed, but any CSS properties which apply to block elements are ignored (e.g. borders, padding, margins etc).

Eu tentei substituir as tags, por span, com o jquery mas essas também não aceitam alinhamento.

tdtag = document.querySelectorAll("td");
tdtag.forEach( e => {
   if(e.style.textAlign == "right"){                
     $(e).html("<span style='text-align:right'>"+$(e).html()+"</span>");
   }
});

Alguém já passou por essa situação e tem alguma solução pra isso?

2
  • span é um elemento inline, logo ele não tem largura maior do que seu conteúdo, e com isso alinhamento nele não surte efeito. Não sei vai dar certo mas tente alterar as propriedades do span com <span style='text-align:right; display: inline-block; width: 100%;'>
    – Sam
    Commented 5/05/2020 às 4:46
  • Valeu pela dica. Mas mesmo assm não funcionou, imagino que o MPDF ignore sempre um elemento que vire block on inline-block dentro de uma tabela. Estou tentando forçar o alinhamento pela <td> pra ver se funciona
    – Rafael
    Commented 5/05/2020 às 12:54

2 Respostas 2

0

Consegui resolver inserindo o text-align diretamente na td, não ficou a coisa mais bonita, mas funciona.

Aqui pego a tag

var ptag = document.querySelectorAll("p");

Aqui eu faço um forEach, e cada elemento que contenha o center eu aplico na <td> mais próxima.

ptag.forEach(e => {
  if(e.style.textAlign == "center") {
    if(e.closest("td")) {
      e.closest("td").style.textAlign = "center";
    }                
  };
});
0

Pode tentar direto na td, assim todos os componentes dela se alinharão ao centro. ficaria:<td style="text-align: center;">

1
  • 1
    Foi o que tive que fazer, mas como as tabelas vão sendo geradas automaticamente, tive que pegar via javascript os elementos na hora de salvar e adicionar a regra na td com closest.
    – Rafael
    Commented 5/05/2020 às 19:05

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 .