1

Taaarde Galera,

Estou com uma duvida, onde na hora do print meu textarea não mostra o texto completo.

Gostaria de saber se poderiam me ajudar a mostra-lo?

Exemplo de como esta: inserir a descrição da imagem aqui

1 Resposta 1

1

Luciano vamos por partes. Primeiro use o @media print { } para colocar os estilos que só vão aparecer quando vc estiver no modo de impressão. Depois habilite a visualização desse CSS pelo Developer Tools do Chrome conforme imagem abaixo.

inserir a descrição da imagem aqui

Agora vc pode ver em sua tela um preview de como vai ficar sua tela na impressão.

Agora vamos ao código. Mesmo setando overflow: visible !important; a sua área de texto não vai expandir na impressão. OBS: mas se for uma DIV e não uma TEXTAREA isso vai funcionar! Vou colocar o código só para vc entender melhor o resto da explicação.

div {
    overflow: auto;
    height: 80px;
    width: 80px;
}
@media print {
    div {
        overflow: visible;
    }
}
<div>
    11111
    33333
    44444
    55555
    66666
    77777
    22222
</div>

Agora se vc quiser manter com uma textarea a solução que te dou é a seguinte.

Vc vai ter uma textarea como já está no seu site, mas também vai ter uma DIV escondida, com display: none No @media print { } vc vai inverter as coisas. Vc vai dar diplay:none na textarea e display:block na div que vai ter o seu texto.

Agora só falta o Script para pegar o conteúdo de um lugar e colocar no outro. No exemplo abaixo tem tudo que vc precisa.

function formNodes(str, node) {
    var arr  = str.split('\n'), i, span;
    for (i in arr) {
        span = document.createElement('span');
        span.appendChild(document.createTextNode(arr[i]));
        node.appendChild(span);
        node.appendChild(document.createElement('br'));
    }
    return node;
}
function updateDiv(id, str) {
    var div  = document.getElementById(id);
    var node = div.cloneNode(false);
    formNodes(str, node);
    document.body.replaceChild(node, div);
}
function initDiv() {
    var div = document.getElementById('hdiv');
    var elm = document.getElementById('ta');
    formNodes(elm.value, div);
}
window.onload = initDiv;
@media print {
    textarea.ta {
        display: none !important;
    }
    div.ta {
        display: block !important;
    }
}
@media screen {
    textarea.ta {
        display: block;
    }
    div.ta {
        display: none;
    }
}
<textarea id="ta" class="ta" rows="3" cols="10" onchange="updateDiv('hdiv', this.value);">
    11111
    22222
    33333
    44444
    55555
    66666
    77777
</textarea>
<div id="hdiv" class="ta"></div>

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 .