印刷前のJavaScriptの変更

JavaScript は、Web アプリケーションで広く使用されているスクリプト言語です。 Web開発を行う上で印刷機能は必須ですが、ブラウザの印刷機能だけを使用すると満足のいく結果が得られない場合があります。したがって、この記事では、JavaScript で印刷ページのスタイルとコンテンツを変更して、より良い印刷効果を実現する方法を紹介します。

1. スタイルを変更します

1. @media メディア クエリを使用します

@media メディア クエリとは、スタイル シート内で @media ルールを使用してスタイル シートのみを作成することを指します。特定のメディア タイプのデバイスに対して有効になります。印刷する前に、@media ルールを使用して印刷ページのスタイルを変更し、印刷ページがより適切になるようにすることができます。

サンプル コードは次のとおりです。

@media print {
  /* 在这里定义修改的样式 */
}

上記のコードでは、 @media print は、プリンターで使用されるメディア タイプを変更することを示しており、ここで次のようなさまざまなスタイルを追加できます。背景色の設定として:

@media print {
  body {
    background-color: #fff;
  }
}

この例では、印刷ページの背景色を白に設定します。

@media ルールでは、ページ サイズや方向の設定など、他のスタイルを追加することもできます。

@media print {
  @page {
    size: A4 portrait; /* 竖向A4页面 */
  }
}

上記のコードでは、@page ルールを使用してページを設定しています。サイズと方向。サイズ属性はページ サイズを設定するために使用され、ポートレートはページの向きが垂直であることを示します。

2. 印刷スタイル シートを使用する

印刷スタイル シートとは、印刷用に特別に用意されたスタイルを含む特別なスタイル シートを指します。これを使用して、印刷前に印刷ページのスタイルを変更できます。

サンプル コードは次のとおりです。

<link rel="stylesheet" href="print.css" media="print" />

上記のコードでは、HTML ファイルに print.css という名前のスタイル シートを導入し、スタイル シートの media 属性を print に設定しました。

print.css スタイル シートでは、印刷用に特別に用意されたスタイルを追加できます。例:

body {
  font-size: 12pt;
  line-height: 1.5;
}

上記のコードでは、印刷ページのフォント サイズを 12pt に設定します。行の高さは 1.5 に設定されます。

印刷スタイル シートを使用すると、元のスタイルに影響を与えることなく、スタイルをより柔軟に変更できます。

2. コンテンツを変更する

1. 不要な要素を非表示にする

印刷ページでは、通常、メニューや広告などの一部の要素を表示する必要はありません。これらの要素は紙を無駄にし、印刷効果に影響を与えます。したがって、JavaScript を使用して、印刷前にこれらの要素を非表示にすることができます。

サンプル コードは次のとおりです。

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 隐藏不必要的元素
    document.getElementById('menu').style.display = 'none';
    document.getElementById('ad').style.display = 'none';
    
    // 执行打印操作
    window.print();
    
    // 恢复元素的显示
    document.getElementById('menu').style.display = 'block';
    document.getElementById('ad').style.display = 'block';
  }
}

上記のコードでは、まず ID printBtn を持つボタンを取得し、それにクリック イベントをバインドします。イベント ハンドラーでは、JavaScript を介して表示属性を「none」に設定することで、id menu と ad を持つ 2 つの要素を非表示にします。次に、印刷操作を実行し、印刷後にこれらの要素の表示属性を「ブロック」に設定して、表示を復元します。

印刷前に要素を非表示にすると印刷効果がきれいになりますが、この機能を実装するときは、非表示の要素がページの他の機能に影響を与えないことに注意する必要があります。

2. 印刷ヘッダーとフッターを追加する

印刷ヘッダーとフッターには、通常、印刷時間、ファイル名などの重要な情報が含まれています。 JavaScript を使用して、印刷前に印刷ヘッダーとフッターを追加できます。

サンプル コードは次のとおりです。

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 添加打印页眉
    var header = '<div style="text-align:center;font-size:14pt;">打印页眉</div>';
    document.body.insertAdjacentHTML('beforebegin', header);
    
    // 添加打印页脚
    var footer = '<div style="text-align:center;font-size:12pt;">打印页脚</div>';
    document.body.insertAdjacentHTML('afterend', footer);
    
    // 执行打印操作
    window.print();
    
    // 删除打印页眉和页脚
    document.body.previousSibling.remove();
    document.body.nextSibling.remove();
  }
}

上記のコードでは、まず ID printBtn を持つボタンを取得し、それにクリック イベントをバインドします。イベント ハンドラーでは、JavaScript を介して印刷ヘッダーとフッターをそれぞれ追加しました。このうち、insertAdjacentHTML() メソッドは、文書内の特定の位置に HTML コードを挿入するために使用され、beforebegin は現在の要素の前に挿入することを意味し、afterend は現在の要素の後に挿入することを意味します。ここでは、ヘッダーとフッターを正しい場所に追加するために、beforebegin と afterend をそれぞれ使用しています。

次に、印刷操作を実行し、印刷完了後、他の機能への影響を避けるために、JavaScript を使用してドキュメントから印刷ヘッダーと印刷フッターを削除しました。

概要

JavaScript を使用して印刷ページのスタイルとコンテンツを変更すると、印刷効果がより理想的になり、ユーザー エクスペリエンスが向上します。機能を実装する際には、ページの互換性や使いやすさに注意し、無用なトラブルを極力避ける必要があります。

以上が印刷前のJavaScriptの変更の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。