ドキュメント · フリーランス請求書ツール
データをサーバーに送信せずにブラウザで請求書 PDF を作成する方法
· 仕組み
請求書 pdf ブラウザ処理
請求書ジェネレーターにはサーバーは必要ありません。フォーム、計算、レイアウト、PDF の作成はすべてタブ内で実行できます。この投稿では、フォームからダウンロードしたファイルまで入力した詳細をたどり、各手順について説明します。
送信のようなフォーム — Web サイト上のフィールドに入力することが通常、送信することを意味する理由と、送信する必要がない理由
フォームはサーバーに送信する必要があるように見えますが、送信はページによって決定されるものであり、テキスト フィールドのプロパティではありません。 ToolAcre 請求書エディターは、下書きをブラウザー状態とローカルストレージに保持します。ページを再度開くと復元できます。共有コンピュータにクライアント アドレスを入力する場合、その永続性が重要になります。フォームとブラウザのストレージをクリアするのはあなたの責任です。ドキュメントは ToolAcre 請求書エンドポイントに投稿されたり、ツールによって電子メールで送信されたりすることはありません。
ページ内の状態 — 入力したフィールドが、バックエンドにポストされるのではなく、タブ内のサイト独自の JavaScript によってどのように保持されるか
フリーランスのデザイナーが受信者、請求書番号、日付、項目を入力すると、イベント ハンドラーがドキュメント モデルを更新します。金額は、プレビューに表示される数値をそのまま信頼するのではなく、ローカルの請求書モデルを使用して表現および合計されます。プレビューと PDF は同じ計算された合計を受け取るため、不一致は別のサーバー コピーではなく、共有計算のバグとなります。リロードすると、ローカルに保存されたドラフトを回復できます。別のデバイスではアカウントからそれを取得できません。
ドキュメントのレイアウト - 名前、日付、請求項目をページ上に配置されたテキストに変換する
PDF ページは座標系であり、流れる Web ページではありません。ローカルのライターは、A4 ページ、余白、マストヘッド、パーティの詳細、項目列、および合計ブロックを設定します。各ラベルと金額は測定された位置に配置され、テキストが列の境界を越える場合は行が折り返されます。引用では、異なるドキュメント ラベルが使用されますが、同じレイアウト パイプラインが使用されます。長い説明には改ページが必要な場合があります。ブラウザーフォームの間隔が PDF の間隔に対応すると仮定するのではなく、常にエクスポートされた内容をプレビューします。
PDF の作成 — ページ独自のコードが PDF オブジェクトとテキストをアセンブルし、完全にメモリ内でバイトを生成する方法
請求書レンダラーは、独自の PDF ライターを呼び出して、テキスト、ルール、陰影付きのバンド、およびオプションのロゴをドキュメント バイトに描画します。 HTML フォームは撮影されません。テキストと数値は PDF コンテンツとして書き込まれるため、出力は通常のドキュメントとして保存できます。ライターはすでに計算された金額を受け取ります。フォーマットされた通貨文字列は表示出力であり、2 番目の計算ではありません。 ToolAcre Web サイトの読み込みにはネットワーク交換が必要でしたが、PDF シリアル化にはネットワーク交換は必要ありません。
ダウンロード — デバイス以外のどこにも存在しなかったファイルを渡す BLOB とオブジェクト URL
書き込み後、アプリケーションはそれらのバイトを BLOB にラップし、ブラウザーのダウンロード メカニズムを使用してファイルを提供します。一時オブジェクト URL は、このブラウザー セッションの BLOB を参照します。これは、クライアントが請求書を取得できる公開 URL ではありません。アプリケーションは、一時オブジェクト URL が役に立たなくなった場合、その URL を取り消します。永続的な記録が必要な場合は、PDF または JSON エクスポートを管理できる場所に保管してください。ブラウザの localStorage はバックアップ システムではありません。
実用的な例 — 2 つの項目からなる見積書を作成し、最初のキーストロークから PDF が保存されるまで [ネットワーク] パネルが空のままであることを確認します。
ロゴスケッチの見積もりは 200 で、レイアウトパスの見積もりは 300 で、税金も割引もありません。ローカルで計算された小計は、選択した通貨で 500 です。テスト クライアント名を入力し、プレビューを調べてエクスポートし、PDF を開いて行と合計を確認します。 DevTools では、サイト アセットと開示された AdSense/分析リクエストを、下書きを含むアップロードから区別します。請求書データは ToolAcre 請求書サーバーには送信されません。共有デバイス上のデモに実際のクライアントの詳細を含めることは避けてください。
これでカバーされないこと — クライアントへの請求書の送信 (これは依然として独自の電子メールまたはポータルで行われます)
このツールはドラフトを生成し、このデバイスに保存します。請求書の発行、配達、署名、調整は行われません。税務規則は管轄区域によって異なり、フォームで税率を選択しても、その結果が会計上のアドバイスになるわけではありません。さらに、識別子、金額、クライアントのアドレスを確認し、独自の承認されたチャネルを通じて PDF を添付またはアップロードする必要があります。コピーを保存する前にブラウザのストレージを失った場合、ドキュメントを復元するためのサーバー アカウントはありません。
要点 — パイプライン全体が 1 つのタブに収まり、Freelance Invoice Tool がデータをデバイスに保存した状態で実行します。
入力からダウンロードまでのパイプラインは、ローカル状態、ローカル演算、PDF ページ描画、ブラウザーに渡される BLOB です。ファイルの生成と送信は区別すると便利です。ToolAcre は前者を実行しますが、後者は任意です。フリーランス請求書ツールを開いて 2 行の例を再現し、共有する前に実際にエクスポートされたバイトを確認します。