印刷前のJavaScriptの変更-フロントエンドQ&A-php.cn

印刷前のJavaScriptの変更

王林

リリース： 2023-05-15 22:51:39

オリジナル

949 人が閲覧しました

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 サイトの他の関連記事を参照してください。