Imprimer uniquement une zone de texte

Question

Je souhaite imprimer uniquement le contenu d'un élément de zone de texte à partir d'une page de site Web. En particulier, je voudrais m'assurer que rien ne soit coupé par la limite de la zone de texte, car le contenu sera assez grand.

Quelle est la meilleure stratégie pour y remédier?

Answer 1

Créer une feuille de style d'impression où tous les éléments sauf la zone de texte sont définis en CSS pour afficher: none ;, et pour la zone de texte, overflow: visible.

Liez-le à la page avec l'étiquette de lien dans l'en-tête défini sur media = "print".

Vous avez terminé.

Answer 2

Faire un CSS différent avec jeu de supports pour imprimer

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

http://webdesign.about.com/cs/css/a/aa042103a.htm

Answer 3

Si l'utilisateur clique « Imprimer », vous pouvez ouvrir une nouvelle fenêtre avec seulement le contenu de la zone de texte sur une page blanche et lancer l'impression à partir de là, puis fermez cette fenêtre.

Mise à jour: Je pense que les solutions CSS suggérées sont probablement de meilleures stratégies, mais si quelqu'un aime cette suggestion, il peut toujours l'augmenter.

Answer 4

J'irais faire un combo des autres suggestions. Ne supprimez pas le bouton d'impression pour toute la page avec une feuille de style, mais fournissez plutôt un bouton par la zone de texte, qui permet à l'utilisateur d'imprimer uniquement ces contenus.

Ce bouton ouvrirait une nouvelle fenêtre, avec des menus/chrome, etc., et cloner le contenu textarea uniquement (et ou fournir un fichier css d'impression)

Answer 5

J'ai fait une impression CSS média pour cacher un certain nombre de champs . Le problème était compliqué par le fait que j'utilisais nicEdit qui crée dynamiquement un IFRAME. Je devais donc ajouter un événement qui prenait des événements flous et les copiait dans une Div (à l'exception de l'impression). "divtext" est la Div hiddent, et "storyText" est la TextArea.

textarea { 
    display: none; 
} 

*/ #divtext { 
    display: block; 
} 

div, DIV { 
    border-style: none !important; 
    float: none !important; 
    overflow: visible !important; 
    display: inline !important; 
} 

/* disable nearly all styles -- especially the nicedit ones! */ 

#nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame { 
    display: none !important; 
} 

/*hide Nicedit buttons */ 

.nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt { 
    display: none !important; 
} 

Le code javascript pour NicEdit:

<script type="text/javascript" src="/media/nicEdit.js"></script> 
<script type="text/javascript"> 
    bkLib.onDomLoaded(function() { 
    var nic = new nicEditor({ 
     fullPanel: true 
    }).panelInstance('storyText'); 

    document.getElementById("storyText").nic = nic; 
    nic.addEvent('blur', function() { 
     document.getElementById("storyText").value = 
     nic.instanceById('storyText').getContent(); 
     document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent(); 
    }); 
    }); 
</script> 

Answer 6

-ce que le trop-plein: visible; sur textarea fonctionne réellement pour l'un d'entre vous? FF3 semble ignorer cette règle sur textarea dans les feuilles imprimées. Pas que ce soit un bug ou quoi que ce soit.