2016-03-20 3 views
1

Ich arbeite derzeit an einer Website, wo ein Benutzer eine mechanische Anfrage von einem Kunden auf der Website betrachten kann. Sie können dann die Anfrage ausdrucken.Textarea mit horizontaler Regel erscheint auf dem Druck

Ich versuche, die Anfrage nur auf der gedruckten Version eine "Notizen" -Abschnitt hinzuzufügen. Ich benutze Bootstrap, also versteckt es, bis der Druck einfach ist.

Mein Problem ist, dass ich horizontale Linien in das Textfeld, genau wie diese Antwort haben wollen: <textarea> with horizontal rule

Die Linien lassen sich gut auf der das Textfeld. Das Problem ist, dass sie nicht zeigen, wenn window.print() aufrufen

Auf der Seite:

Beim Drucken:

Gibt es eine Möglichkeit zu Machen Sie das in der Druckversion sichtbar?

<dt class="visible-print"> 
    Notes 
</dt> 

<dd class="visible-print"> 
    <textarea class="notes" rows="10" cols="100"></textarea> 
</dd> 
.notes { 
    background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-size: 100% 100%, 100% 100%, 100% 31px; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 
    line-height: 31px; 
    font-family: Arial, Helvetica, Sans-serif; 
    padding: 8px; 
} 

Antwort

0

Die meisten Leute haben ihre Browser auf die Standardoption festlegen „nicht Hintergründe drucken.“ Eine dunkle Hintergrundseite kann deine Tinte schnell auffressen! Wenn Ihre "Zeilen" unter Verwendung von "Hintergrund" implementiert werden, werden sie nicht gedruckt.

Als Workaround versuchen Sie, ein unabhängiges Image zu erstellen. Stellen Sie den Z-Index entsprechend ein (denken Sie daran, die Position zu verwenden), und blenden Sie ihn dann vom Bildschirm css aus, und zeigen Sie ihn nur für die Druck-CSS an.

+0

Ich habe keine Ahnung, wie man das macht. Ich bin ein Anfänger in HTML und CSS, fügen Sie bitte ein Beispiel –

+0

Kannst du genauer über das, was Sie rumstolziert haben? Dinge mit Z-Index stapeln? Oder erstellen Sie separate Druck/Bildschirm CSS-Dateien? Etwas anderes? –

+0

Sie wissen, dass diese Frage mehr als 4 Monate alt ist, oder? Wenn ich es bis jetzt nicht geschafft hätte, war der Termin natürlich schon lange her. Es ist mir nicht gelungen, etwas zu tun, was Sie gesagt haben, außer dass ich ein Bild manuell mit den benötigten Zeilen erstellt habe und es dann mit einem CSS einfügte, das es verbirgt, wenn es nicht gedruckt wird. Deshalb habe ich es als akzeptiert markiert, da die Idee tatsächlich funktioniert hat, obwohl das nicht dein Hauptpunkt war (was ich nicht verstanden habe) –

0

Dies wurde in ähnlichen Situationen berichtet, wie die <textarea> vor dem Drucken gerendert wird. Eine Lösung, die es wert ist, betrachtet zu werden, besteht darin, die <textarea> als Standard <div> oder ein anderes Element vor/während des Aufrufs zum Drucken zu duplizieren.

Eine Ressource, die ein Beispiel zeigt, wie man eine <textarea> mithilfe von jQuery ersetzen kann, finden Sie hier: http://www.entwicklungsgedanken.de/2011/02/07/how-to-replace-textarea-tags-with-simple-div-tag-including-it-content-for-a-printing-view/.