web-dev-qa-db-fra.com

Imprimer lorsque textarea a débordé

J'ai un formulaire avec des zones de texte qui permettent une barre de défilement lorsque le texte dépasse la zone de texte. L'utilisateur aimerait pouvoir imprimer l'écran et ce texte n'est pas visible. Comment rendre tout le texte visible uniquement pour l'impression? Suis-je mieux de faire un lien d'impression vers pdf ou quelque chose?

htmlprintingtextarea
39
Timothy Ruhle

Vous ne pouvez pas résoudre ce problème avec CSS seul. 

Pourquoi les solutions Pure-CSS sont insuffisantes (avec démo)

Laissez-moi vous convaincre que les réponses impliquant des feuilles de style d'impression et overflow: visible sont insuffisantes. Ouvrez cette page et regardez la source. Juste ce qu'ils ont suggéré, non? Maintenant, affichez un aperçu avant impression (dans Chrome 13 sous OS X, comme moi). Notez que vous ne pouvez voir qu'une ou deux lignes de la note lorsque vous essayez d'imprimer!

Voici à nouveau l'URL de mon test: https://alanhogan.github.io/web-experiments/print_textarea.html

Solutions:

  1. Un lien JavaScript qui ouvre une nouvelle fenêtre et lui écrit le contenu de la zone de texte pour impression. Ou:

  2. Lorsque la zone de texte est mise à jour, copiez son contenu dans un autre élément caché pour l'écran mais affiché à l'impression.

  3. (Si votre textarea est en lecture seule, une solution côté serveur est également utilisable.)

Notez que textareas traite les espaces différemment du HTML par défaut. Par conséquent, vous devriez envisager d'appliquer le CSS white-space: pre-wrap; dans la nouvelle fenêtre que vous ouvrez ou à votre aide div, respectivement. Cependant, IE7 et les versions antérieures ne comprennent pas pre-wrap. Par conséquent, si le problème persiste, acceptez-le ou utilisez une solution de contournement. ou rendre la fenêtre contextuelle réellement un texte brut, littéralement servi avec un type de média text/plain (qui nécessite probablement un composant côté serveur).

La solution “Print Helper” (avec code + démo)

J'ai créé un demo d'une technique JavaScript .

Le concept de base consiste à copier le contenu de textarea dans un autre assistant d'impression. Le code suit.

HTML:

<textarea name="textarea" wrap="wrap" id="the_textarea">
</textarea>
<div id="print_helper"></div>

CSS (tout/non imprimé):

/* Styles for all media */
#print_helper {
  display: none;
}

CSS (print):

/* Styles for print (include this after the above) */
#print_helper { 
    display: block;
    overflow: visible;
    font-family: Menlo, "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", Monaco, monospace;
    white-space: pre;
    white-space: pre-wrap;
}
#the_textarea {
  display: none;
}

Javascript (avec jQuery):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
  function copy_to_print_helper(){
    $('#print_helper').text($('#the_textarea').val());
  }
  $('#the_textarea').bind('keydown keyup keypress cut copy past blur change', function(){
    copy_to_print_helper(); // consider debouncing this to avoid slowdowns!
  });
  copy_to_print_helper(); // on initial page load
});
</script>

Encore une fois, la démo réussie basée sur JavaScript se trouve à https://alanhogan.github.io/web-experiments/print_textarea_js.html .

63
Alan H.

Parcourez chacune de vos zones de texte et déplacez le contenu vers un détenteur

    window.onbeforeprint = function () {
        $('.print-content').remove();
        $('textarea').each(function () {
            var text = $(this).val();
            $(this).after('<p class="well print-content">' + text + '</p>');
        });
    }

Et utilisez le CSS suivant

.print-content {
  display: none !important;
}

@media print {
  .print-content {
    display: block !important;
  }
  textarea {display: none !important;}
}
5
Samuel Gray

J'ai récemment rencontré le même problème. Ma solution était de dupliquer le contenu dans les contrôles de formulaire pour l'édition et dans les div pour l'impression. 

Dans ma tête, j'ai mis une feuille de style d'impression. 

<link rel="stylesheet" href="printform.css" type="text/css" media="print" />

Dans printform.css je mets ce qui suit

.screenOnly { display: none; }
.printOnly { display: inline-block; }

Pour textareas (et d'autres types de champs posant problème), j'ai utilisé le code suivant

<textarea class="screenOnly" name="myTextArea"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></textarea>
<div class="printOnly"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></div>

Lorsqu'ils sont affichés à l'écran, les zones de texte sont affichées et les div dupliquant leur contenu sont masquées. Lorsque vous imprimez, le contraire 

Je sais que vous avez déjà choisi une réponse à cette question, mais l'utilisation de la feuille de style d'impression est une bonne idée, elle ne décrit pas de solution spécifique. Réglage du débordement: visible sur la zone de texte (ma première idée) n'a pas fonctionné, j'ai donc opté pour la solution ci-dessus. Si vous rencontrez toujours des difficultés, j'espère que cela vous aidera

4
GordonM

Cela semble fonctionner pour appliquer à tous les éléments qui ont un contenu débordant:

$("textarea").each(function () {
    var Contents = $(this).val();
    if ($(this)[0].scrollHeight > $(this).height()) {
        $(this).after("<div class='print-helper'>" + Contents + "</div>");
        $(this).addClass("no-print");
    }
});
1
MILWAUKEE3333

Juste encourager le problème récemment aussi. Merci pour les messages de Alan H. Cela fonctionne parfaitement avec Chrome et Safari. Cependant, avec IE et Firefox, le problème est que les dernières pages (éléments de page après textarea) seront absentes de l'impression (FF), des pages manquantes et de la présentation superposée (IE9).

Une autre conclusion qui sera utile pour résoudre le problème est la suivante: vous pouvez définir correctement les propriétés des lignes de textarea, car la hauteur du contrôle indique qu'il convient de le faire fonctionner avec le dépassement CSS: les éléments visibles. Tous les navigateurs semblent respecter la propriété des lignes lors de l'impression.

1
Ben G

Définissez un code CSS distinct pour les supports d'impression, tel que ce <link rel="stylesheet" href="print.css" type="text/css" media="print" />. Pour la zone de texte, définissez l'attribut de débordement comme suit: 

overflow: visible;
0
Kangkan

Avec l'utilisation de CSS pur, il n'est pas possible de préparer la zone de texte pour l'impression. 

Il est nécessaire d’ajouter de la magie javacript à la zone de texte ou d’ajouter un champ caché.

Il y a quelques solutions, qui ont été mentionnées ici:

  1. Paragraphe caché ou div 
  2. Utiliser Javascript pour étendre la taille de la zone de texte

1. Paragraphe caché ou div 

HTML et CSS:

<textarea>Sample Text</textarea>
<div class="hidden-div">Sample Text</div>

<style>
  .hidden-div{display: none;}
  @media print{
    .hidden-div{display:block;}
  }
</style>

2. Javascript

Vous pouvez utiliser une bibliothèque js, par exemple/ https://github.com/thomasjo/jquery-autoresize

$(function() {
    $("textarea").autoResize()
})
0
Igor Jakovljevic

Ceci est une solution facile avec CSS, étant donné que la plupart des utilisateurs ne sont pas vraiment préoccupés par l’impression d’un espace vierge supplémentaire. Il suffit de cibler une hauteur minimale pour les zones de texte lors de l’impression:

@media print { 
textarea {
min-height: 500px;  
}
}

Marquez-le à la fin de votre CSS avec une hauteur minimale qui est suffisamment confortable lorsque vous le regardez dans Aperçu avant impression.

0
Geoff Kendall