Dokumente · Tool für freiberufliche Rechnungen
Wie ein Browser ein Rechnungs-PDF erstellt, ohne Daten an einen Server zu senden
· Wie es funktioniert
Rechnung pdf Browser-Verarbeitung
Ein Rechnungsgenerator benötigt keinen Server: Das Formular, die Berechnung, das Layout und das PDF-Schreiben können alle im Tab erfolgen. Dieser Beitrag folgt Ihren eingegebenen Daten vom Formular bis zur heruntergeladenen Datei und erklärt jeden Schritt.
Das Formular, das sich wie eine Übermittlung anfühlt – warum das Ausfüllen von Feldern auf einer Website normalerweise bedeutet, dass sie gesendet werden müssen, und warum dies nicht unbedingt der Fall sein muss
Ein Formular sieht so aus, als müsste es an einen Server übermittelt werden, aber die Übermittlung ist eine Entscheidung der Seite und keine Eigenschaft von Textfeldern. Der ToolAcre-Rechnungseditor behält den Entwurf im Browserstatus und im lokalen Speicher; Durch erneutes Öffnen der Seite kann sie wiederhergestellt werden. Diese Beständigkeit ist wichtig, wenn Sie eine Client-Adresse auf einem gemeinsam genutzten Computer eingeben: Das Löschen des Formulars und der Browserspeicherung liegt in Ihrer Verantwortung. Das Dokument wird weder an einen ToolAcre-Rechnungsendpunkt gesendet noch vom Tool per E-Mail verschickt.
Geben Sie auf der Seite an, wie die von Ihnen eingegebenen Felder vom eigenen JavaScript der Website im Tab gespeichert und nicht an ein Backend gesendet werden
Während ein freiberuflicher Designer einen Empfänger, eine Rechnungsnummer, Daten und Einzelposten eingibt, aktualisieren Ereignishandler das Dokumentmodell. Geld wird mithilfe des lokalen Rechnungsmodells dargestellt und summiert, anstatt sich auf die Zahlen zu verlassen, die zufällig in einer Vorschau angezeigt werden. Die Vorschau und das PDF erhalten die gleichen berechneten Summen, sodass eine Nichtübereinstimmung ein Fehler in einer gemeinsamen Berechnung und nicht in einer separaten Serverkopie wäre. Durch Neuladen kann der lokal gespeicherte Entwurf wiederhergestellt werden; Ein anderes Gerät kann es nicht von einem Konto abrufen.
Layout des Dokuments – Namen, Daten und in Rechnung gestellte Posten in positionierten Text auf einer Seite umwandeln
PDF-Seiten sind Koordinatensysteme, keine fließenden Webseiten. Der lokale Autor legt eine A4-Seite, Ränder, ein Impressum, Partydetails, Artikelspalten und einen Summenblock fest. Jede Beschriftung und jeder Betrag wird an einer gemessenen Position platziert, mit Zeilenumbruch, wenn der Text eine Spaltengrenze überschreiten würde. Ein Angebot verwendet ein anderes Dokumentetikett, aber dieselbe Layout-Pipeline. Eine lange Beschreibung kann einen Seitenumbruch erfordern; Zeigen Sie immer eine Vorschau dessen an, was exportiert wurde, anstatt davon auszugehen, dass Browser-Formularabstände den PDF-Abständen zuordnen.
Schreiben der PDF – wie der eigene Code der Seite PDF-Objekte und Text zusammenfügt und Bytes vollständig im Speicher erzeugt
Der Rechnungsrenderer ruft seinen eigenen PDF-Writer auf, um Text, Regeln, schattierte Bänder und ein optionales Logo in Dokumentbytes zu zeichnen. Das HTML-Formular wird nicht fotografiert: Text und Zahlen werden als PDF-Inhalt geschrieben, sodass die Ausgabe als normales Dokument gespeichert werden kann. Der Autor erhält bereits berechnete Beträge; Eine formatierte Währungszeichenfolge ist eine Anzeigeausgabe, keine zweite Berechnung. Für die PDF-Serialisierung ist kein Netzwerkaustausch erforderlich, auch wenn das Laden der ToolAcre-Website ursprünglich einen erforderte.
Der Download – ein Blob und eine Objekt-URL, die Ihnen eine Datei liefern, die nirgendwo anders als auf Ihrem Gerät existierte
Nach dem Schreiben verpackt die Anwendung diese Bytes in einen Blob und nutzt den Browser-Download-Mechanismus, um eine Datei anzubieten. Eine temporäre Objekt-URL verweist auf den Blob in dieser Browsersitzung. Es handelt sich nicht um eine öffentliche URL, unter der Ihr Kunde die Rechnung abrufen kann. Die Anwendung widerruft temporäre Objekt-URLs, wenn sie nicht mehr nützlich sind. Bewahren Sie das PDF oder einen JSON-Export an einem Ort auf, an dem Sie die Kontrolle haben, wenn Sie eine dauerhafte Aufzeichnung benötigen. browser localStorage ist kein Backup-System.
Bewältigtes Beispiel: Erstellen eines Angebots mit zwei Artikeln und beobachten, wie das Bedienfeld „Netzwerk“ vom ersten Tastendruck bis zur gespeicherten PDF-Datei leer bleibt
Versuchen Sie, ein Angebot für eine Logo-Skizze für 200 und einen Layout-Pass für 300 zu erhalten, ohne Steuern oder Rabatt. Die lokal berechnete Zwischensumme beträgt 500 in der von Ihnen ausgewählten Währung. Geben Sie den Namen eines Testkunden ein, überprüfen Sie die Vorschau, exportieren Sie und öffnen Sie die PDF-Datei, um beide Zeilen und die Gesamtsumme zu überprüfen. Unterscheiden Sie in DevTools Site-Assets und offengelegte AdSense-/Analyseanfragen von einem Upload mit dem Entwurf: Die Rechnungsdaten werden nicht an einen ToolAcre-Rechnungsserver gesendet. Vermeiden Sie es, bei einer Demonstration auf einem gemeinsam genutzten Gerät echte Kundendaten anzugeben.
Was dies nicht abdeckt – das Versenden der Rechnung an den Kunden, was Sie weiterhin über Ihre eigene E-Mail oder Ihr eigenes Portal tun
Das Tool generiert und speichert einen Entwurf auf diesem Gerät; Es wird keine Rechnung für Sie ausgestellt, zugestellt, unterzeichnet oder abgeglichen. Die Steuervorschriften variieren je nach Gerichtsbarkeit, und die Auswahl eines Steuersatzes in einem Formular führt nicht zu einer buchhalterischen Beratung. Sie müssen noch die Kennungen, Beträge und die Kundenadresse überprüfen und dann die PDF-Datei anhängen oder über Ihren eigenen genehmigten Kanal hochladen. Wenn Sie vor dem Speichern einer Kopie Browserspeicher verlieren, gibt es kein Serverkonto, von dem aus Sie das Dokument wiederherstellen können.
Fazit: Die gesamte Pipeline passt in einen Tab und das Freelance Invoice Tool führt sie mit Ihren auf Ihrem Gerät gespeicherten Daten aus
Von der Eingabe bis zum Herunterladen der Pipeline werden lokaler Status, lokale Arithmetik, PDF-Seitenzeichnung und ein Blob an Ihren Browser übergeben. Der nützliche Unterschied besteht zwischen dem Generieren einer Datei und dem Versenden: ToolAcre führt Ersteres aus, während Letzteres Ihre Wahl ist. Öffnen Sie das Freelance Invoice Tool, um das zweizeilige Beispiel zu reproduzieren und die tatsächlich exportierten Bytes zu überprüfen, bevor Sie sie freigeben.