印刷プレビューWebコンポーネントの作成

この記事では、正確な印刷制御とプレビュー用に設計された <print-preview></print-preview> Web コンポーネントについて詳しく説明し、1994 ～ 1996 年の VBA アプリケーションを最新の Web ベースの電子商取引プラットフォームに移行する際の重大な課題に対処します。 元のアプリケーションは MS Access レポートに依存していたため、新しい Web 環境で納品書や請求書などの印刷可能なドキュメントを生成するための堅牢なソリューションが必要でした。

<print-preview></print-preview> コンポーネントは、いくつかの重要な機能を提供します。

• WYSIWYG 印刷プレビュー: 印刷時に表示される内容を正確に表示します。
• 包括的なカスタマイズ: 用紙サイズ、フォント、余白、画像処理 (表示、非表示、アウトライン) をきめ細かく制御できます。
• 動的コンテンツのテンプレート: MS Access レポートの機能をミラーリングして、請求書などの動的ドキュメントを生成するためのテンプレートをサポートします。
• 国際化 (i18n): 複数の言語に簡単に適応できます。

実装:

コンポーネントは次のように HTML に統合されます:

<print-preview><paper-sheet><h1 id="Hello-Printer">Hello, Printer!</h1><p>This will look great on paper.</p></paper-sheet></print-preview>

各 <paper-sheet></paper-sheet> 要素は 1 つのページを表します。 重要なのは、コンポーネントは 要素の直接の子である必要があり、インスタンスは 1 つだけ許可されるということです。 コンポーネントは JavaScript 経由でロードされます:

import PrintPreview from './index.js';

preview() メソッドを使用して表示されます:

const printPreview = document.querySelector('print-preview');
if (printPreview) printPreview.preview();

テンプレートの例 (請求書):

テンプレートは Access レポートの機能を置き換えます:

const invoiceTemplate = (data) => 
  data.map((obj) => {
    // ... (Invoice data processing) ...
    return `
    <paper-sheet><h2 id="Invoice">Invoice</h2>
      <p> ... </p>
      <table part="table"></table></paper-sheet>
    `;
  }).join('');

CSS と ::part によるスタイル設定:

CSS と ::part 疑似要素は、レポート デザイナーと同様のスタイル機能を提供します。

print-preview {
  &::part(table) {
    border-collapse: collapse;
    margin-block-start: 4rem;
    width: 100%;
  }
  // ... (other styles) ...
}

テンプレート内で直接スタイル設定することも可能です。

画像処理:

このコンポーネントを使用すると、印刷プレビューでの画像の可視性を制御でき、表示、非表示、またはプリンターのトナーを節約するためのアウトラインとして表示するオプションが提供されます。

ローカリゼーション:

コンポーネントのインターフェース言語は、i18n オブジェクトを使用して簡単に設定できます:

PrintPreview.i18n = {
  es: {
    // ... (Spanish translations) ...
  }
};

結論:

<print-preview></print-preview> コンポーネントは、Web アプリケーションで印刷出力を管理するための強力なソリューションを提供し、古いシステムのレポート生成機能を効果的に置き換えます。 著者は、このコンポーネントはまだ開発中であり、更新やバグ修正が行われる可能性があると述べています。 さらに詳しく調べるために、デモと GitHub リポジトリを利用できます。

ウェンデリン・ヤコーバーによるカバー画像：https://www.php.cn/link/86158a6b3924670a32dad65bbc41bd95

以上が印刷プレビューWebコンポーネントの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。