印刷プレビューWebコンポーネントの作成-jsチュートリアル-php.cn

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

DDD

リリース： 2025-01-24 20:35:09

オリジナル

814 人が閲覧しました

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

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

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

実装:

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

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

ログイン後にコピー

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

<code class="language-javascript">import PrintPreview from './index.js';</code>

ログイン後にコピー

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

<code class="language-javascript">const printPreview = document.querySelector('print-preview');
if (printPreview) printPreview.preview();</code>

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

<code class="language-css">print-preview {
  &::part(table) {
    border-collapse: collapse;
    margin-block-start: 4rem;
    width: 100%;
  }
  // ... (other styles) ...
}</code>

ログイン後にコピー

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

画像処理:

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

ローカリゼーション:

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

<code class="language-javascript">PrintPreview.i18n = {
  es: {
    // ... (Spanish translations) ...
  }
};</code>

ログイン後にコピー

結論:

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

Creating a Print Preview Web Component