nicht angemeldet
TextArea ausdrucken
Hallo alle zusammen,
Ich möchte nur den TextArea Inhalt ausdrucken.
Dieses Textfeld hat jedoch Schriftgrößen und Farben die jeder manuell einstellen kann. Funktioniert alles durch document.getElementById...
Aber beim Print Button den ich bis jetzt habe druckt der nur ganz nach Standard. Schwarze Farbe und normale Schriftgröße.
Gibt es eine Möglichkeit dies so auszudrucken das sich nichts ändert wenn man ausdrucken will. Es wäre auch besser, wenn Ihr meine Fehler korrigieren könnten, den davon hab ich leider auch ganz viele in meinem Projekt.
(Dies ist nur die Kurzform von meinem Projekt.)
Hier mein Projekt:
<center>
<style type="text/css">
#printFrame {
position: absolute;
width: 0px; height: 0px;
border-style: none;
}
</style>
<script type="text/javascript">
function printInput(f){
var ifr = window.frames['printFrame'];
if (ifr){ //print the content of the invisible iframe
ifr.document.getElementById('content').innerHTML=f.txtfield.value.replace(/\n/g,'<br />');
ifr.focus();
ifr.print();
}
else { //print by opening a new window and then closing it
var html='<html><head><style type="text/css">div{font:normal 14px Verdana}</style></head><body onload="window.print();window.close()"><div>'+f.txtfield.value.replace(/\n/g,'<br />');+'</div></body></html>'
var win = window.open('','_blank','menubar,scrollbars,resizable');
win.document.open();
win.document.write(html);
win.document.close();
}
}
function writeContent(objIframe){
var html='<html><head><style type="text/css">div{font:normal 14px Verdana}</style></head><body><div id="content"></div></body></html>'
objIframe.document.write(html);
objIframe.document.close();
}
</script>
<style type="text/css">
<!--
.textmakermenulink { padding: 4px 6px 4px 6px; color: #000; border:0px solid #000; }
.textmakermenulink:hover { padding: 4px 6px 4px 6px; color: #000; border:0px solid #000; background-color: lightgreen; }
.textmakerlinkinmenu {cursor:default;padding:2px 4px 2px 4px;}
.textmakerlinkinmenu:hover {background-color: red;cursor:default;}
.textmakeropttitle { text-align:center; }
-->
</style>
<script type="text/javascript">
function Textgroesse() {
var groesse = document.Formel.Auswahl.options[document.Formel.Auswahl.selectedIndex].value+"px";
document.getElementById("txtfield").style.fontSize=groesse;
}
function Schriftfarbe() {
var groesse = document.Formel.Auswahl2.options[document.Formel.Auswahl2.selectedIndex].value;
document.getElementById("txtfield").style.color=groesse;
}
</script>
<nobr>
<form name="Formel">
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="820px" cellpadding="2" cellspacing="0">
<tr>
<td class="textmakeropttitle">Font Size</td>
<td class="textmakeropttitle">Font Color</td>
<td class="textmakeropttitle"></td>
<td class="textmakeropttitle"></td>
<td class="textmakeropttitle"></td>
<td class="textmakeropttitle"></td>
<td class="textmakeropttitle"><input type="button" value="reset" onclick="this.form.txtfield.value='';"></td>
</tr>
<tr>
</td>
<td class="textmakeropttitle"><select name="Auswahl" size="1" onChange="Textgroesse();">
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12" selected="selected">12 Standart</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="32">32</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
</select>
</td>
<td class="textmakeropttitle"><select name="Auswahl2" size="1" onChange="Schriftfarbe();">
<option value="#000000" selected="selected" style="color: #000000;">Schwarz</option>
<option value="#FF0000" style="color: #FF0000;">Rot</option>
<option value="#0000FF" style="color: #0000FF;">Blau</option>
<option value="#00BF00" style="color: #00BF00;">Grün</option>
<option value="#FF963B" style="color: #FF963B;">Orange</option>
<option value="#FFFF00" style="color: #FFFF00;">Gelb</option>
<option value="#F787FF" style="color: #F787FF;">Pink</option>
<option value="#ABABAB" style="color: #ABABAB;">Silber</option>
<option value="#A10808" style="color: #A10808;">Braun</option>
<option value="#FFFFFF" style="color: #F5F5F5;">Weiß</option>
</select>
</td>
</tr>
</table>
</nobr>
<textarea name="txtfield" rows=44 cols=80 style="width:820px;height:860px;padding:80px;max-width:820px;max-height:860px;min-width:820px;min-height:860px;font-family:arial;font-size:12;font-color:#000000;" id="txtfield">Test...</textarea></div>
<div><input type="button" value="Print input" onclick="printInput(this.form)" /></div>
<iframe name="printFrame" id="printFrame" src="javascript:parent.writeContent(this)"></iframe></form>
</center>