Ich mag es immer, wie man in FreshBooks Rechnungen bearbeitet, indem man einfach direkt auf einer Webseite klickt und mit ihr interagiert, die wie eine Rechnung aussieht. Ich dachte mir, es wäre eine ziemlich coole Idee, meine eigene bearbeitbare HTML-Rechnung zu erstellen. Das kann natürlich bei weitem nicht all die großartigen Dinge, die FreshBooks kann, aber es könnte für einige von Ihnen mit extrem leichten Rechnungsanforderungen nützlich sein.
Demo ansehen Dateien herunterladen
Eine Menge <textarea>s
Sie können Werte von textarea-Elementen in HTML voreinstellen, indem Sie einfach Text zwischen dem öffnenden und schließenden Tag einfügen. Alles, was es braucht, um bearbeitbare Elemente auf einer Webseite zu erstellen, ist die Verwendung von Textareas. Es gibt zusätzliche Boni bei der Verwendung von Textareas. Erstens sind sie echte Formularelemente, sodass Sie das Ganze theoretisch in ein Formular-Tag einschließen, einen Senden-Button hinzufügen und etwas PHP schreiben könnten, um es zu verarbeiten und andere Dinge damit zu tun. Zweitens speichern Browser dazu tendieren, die Werte von Formularelementen zu speichern. Wenn Sie also versehentlich die Seite neu laden, während Sie daran arbeiten, bleiben die bisher geänderten Werte erhalten.
Warum zum Teufel sollte man das mit HTML und nicht mit normaler Desktop-Software machen, die für so etwas entwickelt wurde?
Guter Punkt, Stimme in meinem Kopf. Nun, erstens erfordert dies keine Software außer Ihrem Browser. Wenn Sie dies an einem geheimen Ort auf Ihrer Website platzieren, könnten Sie theoretisch von jedem Computer der Welt mit Internetzugang und einem Drucker darauf zugreifen und eine Rechnung ausdrucken.
Es ist heutzutage ziemlich trivial, auf PDF zu drucken, sodass Sie letztendlich beim Drucken stattdessen in PDF speichern könnten, was Ihnen ein echtes Dokument zum E-Mailen, Archivieren oder was auch immer gibt. Es ist danach nur etwas schwer zu bearbeiten.
Saubere Ausdrucke
Wenn Sie einen völlig sauberen Ausdruck dieses Dings erhalten möchten, schauen Sie sich diese Druckoptionen von Firefox an
Schalten Sie im Grunde alle Kopf- und Fußzeilen aus und aktivieren Sie den Druck von Hintergrundfarben.
Update
Jon Neal hat eine Version davon, die er nach seinem Geschmack aktualisiert hat.
Sie können
-webkit-print-color-adjust: exact;In WebKit-Browsern erzwingen Sie beispielsweise, dass die schwarze Leiste wie auf dem Bildschirm gedruckt wird, anstatt weiß mit grauen Buchstaben zu werden.
Ziemlich nett. Etwas JavaScript, um die Gesamtsumme für Sie zu berechnen, wäre schön.
Das wäre nett, obwohl ich es so machen möchte, dass Sie immer noch die volle Kontrolle über dieses Feld haben, falls Sie etwas überschreiben müssen.
JavaScript, um Text automatisch auszuwählen, wenn man in ein Textfeld klickt, wäre auch nett. Vielleicht Version 2.
Wie fügt man automatisch Zeilen in die Tabelle ein/entfernt sie?
In der aktuellen HTML gibt es drei Zeilen, eine davon ist leer, enthält aber immer noch Textfelder, um eine neue Informationszeile hinzuzufügen. Wenn Sie mehr, weniger oder bearbeiten möchten, bearbeiten Sie die HTML.
Ein wenig jQuery, um neue Zeilen hinzuzufügen, könnte eine weitere gute Funktion für Version 2 sein. ;)
Sehr schön, besonders da heute Rechnungs-Tag ist.
Gute Arbeit, es sieht toll aus. Und ich wusste tatsächlich nicht, dass man Kopf- und Fußzeilen beim Drucken einer Webseite entfernen kann, das ist ein toller Tipp!
Sehr cooles Design.
Sie können nicht mehr als zwei Belege auf dieser Rechnung hinzufügen. Oder zumindest sind sie nicht sichtbar. #fail
Dateien herunterladen. HTML nach Ihren Wünschen bearbeiten. #win
Ich mag die Tatsache, dass es vollständig nach unserem Geschmack bearbeitbar ist, was meiner Meinung nach ein riesiger #win ist!
Tolle Arbeit Chris, ich denke, Sie verdienen mehr Anerkennung als Sie für die Dinge bekommen, die Sie tun, um der Web-Community zu helfen!
Du hast dich hier wieder selbst übertroffen, Chris. Gute Arbeit, Mann!
Das ist großartig. Ich werde mein eigenes JS hinzufügen, das ich von diesem Formular habe. Es summiert die Beträge und fügt Zeilen hinzu, alles mit JS. Fühlen Sie sich frei, nach Belieben zu schöpfen. Keine meine eleganteste Lösung, aber sie funktioniert.
Schön, das gefällt mir sehr gut. 100% besser als die Rechnung, die ich normalerweise benutze. Ich werde damit ein wenig herumspielen und sehen, was dabei herauskommt. Danke.
Nein, das ist eine erstaunliche Idee. Ich musste jetzt einen Monat lang eine Rechnung für einen gelegentlichen Kunden erstellen, den ich wegen der Einrichtung nie gemacht habe. Danke Chris, das ist eine perfekte Idee und Ressource.
Ich benutze Gmail Docs für Rechnungszwecke. Sie können entweder HTML und PDF exportieren. Ihre Idee ist trotzdem nett, aber ich glaube, Gmail Docs kann es besser?
Sehr cool, ich könnte mir vorstellen, dass sich das noch weiter entwickelt. Ich würde das gerne Kunden anbieten, ihnen erlauben, die Seite zu speichern, damit ich später darauf zugreifen kann.
Sagen wir, Sie könnten das nach der Bearbeitung durch den Kunden auf Ihrem Server speichern. Welches Programm würden Sie verwenden, wenn Sie anschließend ein PDF für den Benutzer generieren möchten?
Nun, man kann mit HTML ziemlich gute Corporate-Sachen erstellen, daher denke ich, es ist eine ziemlich gute Idee für das Branding.
Ich benutze InDesign für meine Rechnungen, aber es scheint eine gute Idee zu sein. Benötigt nur Font-Unterstützung und einige jQuery-Sachen.
Ich denke, es wäre schön, wenn es eine nicht-bearbeitbare Version gäbe, um sie als HTML-E-Mail an Ihren Kunden zu senden.
Gute Arbeit sowieso.
Das ist großartig! Wird es von nun an benutzen. Danke fürs Teilen, Chris.
Gut gemacht! Wirklich hilfreich!
Das Layout ist daneben, das Logo ist zu weit unten, wo Datum und Rechnungsnummer sein sollen. Sehen Sie sich die Demo an.
Sehr nützlich, wenn man es eilig hat!
Normalerweise benutze ich Filemaker.
Ich danke Ihnen wirklich für all Ihre Arbeit, Chris.
zuerst das großartige Jquery "Custom Order Form"
Damit wird einfach berechnet, was Sie brauchen.
Dann... wie jemand sagte: "Zeilen hinzufügen nötig"... pfff
Ich kann es noch nicht benutzen, aber die live()-Funktion von Jquery ist eine wirklich große Hilfe.
Wenn es jemand bereits benutzt, lassen Sie es mich bitte wissen.
Aus Chile.
Ich denke, ein bisschen jQuery könnte dies wirklich zu einem Anwärter für meine Rechnungsanforderungen machen. Danke, Chris!
Chris, ich habe gerade ein paar Änderungen vorgenommen, um es etwas schöner zu machen. Die Demo finden Sie hier.
Im Grunde setzt es von oben nach unten automatisch das Datum und aktualisiert die Summen, wenn Sie die Stückpreise und Mengen ändern. Sie können jetzt auch neue Zeilen hinzufügen. Sie können die Dokumentation in der application.js einsehen, wenn Sie mehr Informationen wünschen.
Außerdem wurde ein Druck-Stylesheet hinzugefügt, um neue Links beim Drucken zu entfernen.
Auch, wenn jemand interessiert ist, können Sie es hier herunterladen.
Noah, Ihre Demo berechnet die Zwischensumme und die Gesamtsumme falsch. Um zu sehen, was ich meine, fügen Sie eine neue Zeile hinzu und ändern Sie die Stückkosten; wenn Sie die anderen Spalten ändern, wirkt sich dies nicht auf den Endpreis aus.
Ihre Ergänzungen sind nützlich, aber sinnlos, wenn Sie dies nicht korrigieren. :-)
Sehr schön. Ich hätte das vor etwa einer Woche gebrauchen können, habe aber einfach Vorlagen in Quickbooks eingerichtet. Fügen Sie ein wenig PHP/MySQL hinzu und Sie haben ein Rechnungsverwaltungsprogramm.
Gut gemacht! Danke Chris.
Auf dem Bild im Beitrag gibt es einen Rahmen oben auf der Box für die Rechnungsnummer, aber nicht im Beispiel oder in den heruntergeladenen Dateien. Also habe ich nur eine div um die #meta-Tabelle gelegt und den Float auf rechts und den oberen Rand auf 1px solid black gesetzt. Keine Ahnung, ich finde, es sieht so etwas schöner aus.
Sehr cooles Konzept! ^^
@Chris Coyier Würden Sie es mir verzeihen, wenn ich Ihren JQuery-Code für unser Abschlussprojekt verwende? Denn eine seiner Funktionen ist Inline-Bearbeitung und das Drucken des Formulars im laufenden Betrieb.
Jeder Code/jede Beispieldatei, die Sie auf dieser Website finden, können Sie für alles verwenden, was Sie möchten!
Danke! Natürlich werden Credits für Sie und CSS-Tricks enthalten sein! ^^
Für die Inline-Bearbeitung werfen Sie einen Blick auf das contentEditable-Attribut (http://blog.whatwg.org/the-road-to-html-5-contenteditable). Eingeschränkte Unterstützung für den Moment, aber es sieht so aus, als ob es groß sein wird, sobald die HTML5-Unterstützung zunimmt.
Das ist ziemlich cool. Ich habe das für zukünftige Upgrades integriert. "Zukunft" bedeutet "wenn die HTML5-Unterstützung zunimmt". ^^
Ich bin auch darauf gestoßen. Es scheint in allen meinen Browsern zu funktionieren. Was sind die Kompromisse zwischen der Verwendung dieser Methode und Textareas? Es scheint, dass das Setzen des contentEditable-Attributs eine bessere Methode ist, um ein bearbeitbares Dokument zu erstellen, da Sie den Inhalt formatieren können. Würde es irgendeine Möglichkeit geben, den Dokumentenzustand mit PHP zu übermitteln, wie Sie es bei einem Formular tun würden?
Nun, der Hauptvorteil der Verwendung von contentEditable ist, dass Sie Rich-Text (und fortgeschrittenere) Bearbeitungsfunktionen aktivieren können, obwohl dies meiner Meinung nach eine ganze Menge JavaScript-Arbeit erfordert.
Schauen Sie sich dieses Beispiel auf QuirksMode an: http://www.quirksmode.org/dom/execCommand/
Was das Übermitteln des Inhalts angeht, ist Ihre beste Wahl, das innerHTML (oder .html() mit jQuery) für alle Elemente abzurufen, die beim Absenden (wenn der Benutzer auf "Speichern" klickt) als contentEditable markiert sind, und diese zu versteckten Eingabefeldern oder Textareas hinzuzufügen. Alternativ könnten Sie wahrscheinlich dasselbe mit AJAX tun und Aufrufe zu bestimmten Intervallen oder bei bestimmten Aktionen einrichten und das innerHTML als Daten innerhalb dieser Anfrage senden.
Gute Arbeit! Das ist sehr clever. Ich dachte zuerst, es würde Flickr-ähnliche Felder haben, aber das ist einfacher und wohl noch benutzerfreundlicher.
Es wäre schön, es an eine Datenbank mit Kundenprofilen usw. anzubinden.
Coole Sache, Chris... Ich plane schon seit einiger Zeit, eine gute Rechnung zu bekommen. Habe die Rechnungsvorlagen in Microsoft Word verwendet, lol. So kann man sie sehr einfach aktualisieren :D Ich hatte gerade diesen Gedanken, dass wir sie lebendiger und interaktiver mit jQuery gestalten können und vielleicht eine Version 2 davon machen können, bei der der Besitzer sich nur einloggen und sie bearbeiten kann und dann den Link an den Kunden mailt (zusammen mit einer PDF-Version). Auf diese Weise kann der Kunde auch etwas ziemlich Cooles und Einzigartiges erleben :D Wie ist der Gedanke?
Habe gerade bemerkt, dass das Rechnungsdatum mein Geburtstag ist! lol
Mein Fehler.. Tolle Arbeit, Chris..
Es sieht so aus, als ob meine Firefox-Installation nicht richtig rendern möchte.
Schöne Anwendung. Ich habe den Code noch nicht durchsucht, um zu sehen, warum das passiert, aber die Dinge werden auf einem PC mit FF 3.0.15 oder IE 7 nicht an den richtigen Stellen angezeigt.
Ups.. Screenshot von dem, was ich sehe..
http://i51.photobucket.com/albums/f383/Mistfit/invoice-example.jpg
Danke.. Ich dachte, ich wäre der Einzige, der dieses Problem hat.. es ist auch bei meinem IE8 so.
Warum, oh warum benutzt du IE8?
Es sieht in Firefox gut aus, außer dass die oberste Zeile der Rechnungsdetailbox fehlt.
IE8 ist kein Browser, der es wert ist, berücksichtigt zu werden.
Tatsächlich machen Firefox 3.0.11 und IE 8 beide das Gleiche für mich.
Wann werden Sie, Leute, Chris einen 21-Salven-Gruß geben.
Hey! Chris, Ihre Website hat in 15 Minuten ein Problem gelöst, mit dem ich seit 8 Monaten kämpfe.
Mach weiter, Mann. Deine Bemühungen werden geschätzt. Ich bin ein regelmäßiger Besucher und erzähle auch anderen davon.
Sehr schön!
Danke!
Das ist großartig! Genau das, wonach ich gesucht habe - mit einigen grundlegenden Bearbeitungen in der HTML und CSS ist es brillant.
Chris – Tippfehler im Textkörper von "Clean Prints".
Das ist interessant, und ich frage mich, ob es eine Möglichkeit gibt, es so weiterzuentwickeln, dass Kunden ihre Rechnung in Echtzeit überprüfen können (ohne die Bearbeitungsfunktion), mit einer Historie, damit sie ihre früheren Zahlungen sehen können. Vielleicht redundant oder bereits woanders vorhanden.
Hallo Chris,
Gut gemacht! Und es kann nützlich sein, wenn zum Beispiel ein Kunde während eines Meetings eine schnelle Berechnung wünscht. Wenn Sie es – wie Sie sagten – auf Ihrer Website in einem gesicherten Ordner ablegen, können Sie es von dort aus aufrufen und eine schnelle Durchsicht machen.
Danke für das Teilen.
Etwas HTML5 und schöne jQuery-Sachen könnten das wirklich, wirklich aufpeppen :)
Schön aber, würde es nicht für echte Rechnungen verwenden.
Dieses Werkzeug ist sehr nützlich. Sie müssen Ihre Zeit jetzt nicht verschwenden, fügen Sie einfach Ihre Informationen hinzu.
Project Bubble macht das auch gut und wird jeden Tag besser: http://www.projectbubble.com
Grüße Chris
Danke für den Beitrag. Wenn man es in ein bearbeitbares PDF-Dokument umwandeln könnte, wäre es noch besser.
Hallo, das war nett, es gefällt mir. Ich hoffe, jemand kann mir hier helfen, ich arbeite an einem Projekt, bei dem ich eine PDF-Rechnung erstellen möchte, um eine Rechnung zu drucken. Ich versuche es mit Java iText, aber ich schaffe es nicht... Ich brauche Hilfe von Experten dabei... Kann mir jemand helfen, dieses Problem zu lösen?
Tolle Idee. Funktioniert bei mir, außer dass das Speichern des Webformulars (Senden) die Änderungen oder hinzugefügten Zeilen nicht speichert. Wenn ich mir den gespeicherten HTML-Code ansehe, sind die hinzugefügten Zeilen nicht vorhanden.
Gibt es eine Möglichkeit, die abgeschlossene Rechnung mit mehreren Zeilen so zu speichern, wie sie ist?
Ich schätze, eine Umgehungslösung wäre, eine feste Anzahl von Zeilen zu erstellen, anstatt den Code "Zeile hinzufügen" zu verwenden... ??
Ich möchte alle Rechnungen des Tages speichern und dann die Summen für einen Tagesumsatzbericht akkumulieren können...
Wirklich nett!! Ich frage mich, ob Sie einen druckbaren Vertrag wie diesen erstellen könnten, der tatsächlich funktioniert. Ich bekomme ihn nicht gedruckt und wenn er gesendet wird, kommt nur das Formular zurück.
Du hast mir gerade eine Menge Zeit gespart!!
Danke :)