JavaScriptで印刷プレビュー機能を実装する方法-フロントエンドQ&A-php.cn

JavaScriptで印刷プレビュー機能を実装する方法

PHPz

リリース： 2023-04-19 14:40:33

オリジナル

1911 人が閲覧しました

ネットワーク技術の急速な発展に伴い、インターネットアプリケーションはますます普及しており、Web アプリケーションもその不可欠な部分となっています。多くの Web アプリケーションでは、印刷機能は非常に重要な機能ですが、ブラウザーやオペレーティングシステムが異なると印刷効果が異なる場合があるため、印刷プレビューを実行して印刷効果の精度を確認する必要があります。 JavaScript で印刷プレビューを実装する方法も開発者の注目を集めています。

前提知識

JavaScript で印刷プレビューを実装する方法を紹介する前に、いくつかの前提知識を理解する必要があります:

window.print() メソッド

window.print() は JavaScript に付属するメソッドで、主に印刷機能の実装に使用され、このメソッドを呼び出すと、ブラウザは現在のページの印刷を直接開始します。

CSS 印刷スタイル

印刷プレビューでは、CSS スタイルも非常に重要な部分です。 CSS スタイルを通じて、印刷ページのレイアウト、フォント、色などを制御できます。

印刷ページサイズ

デバイスによって印刷用紙サイズが異なる場合があるため、デバイスの印刷用紙サイズに応じて印刷ページのレイアウトを調整する必要があります。。

window.matchMedia() メソッド

window.matchMedia() は JavaScript に付属するメソッドで、主に現在のデバイスのディスプレイサイズを決定するために使用されます。この方法を使用して、さまざまなデバイスの表示効果を調整できます。

実装手順

予備知識を基礎にして、JavaScript で印刷プレビューを実装する方法の紹介を開始できます。

印刷ボタンの作成

まず、ユーザーがボタンをクリックして印刷プレビュー機能をトリガーできるように、ページに印刷ボタンを作成する必要があります。ボタンのコードは次のとおりです。

<button onclick="printPreview()">打印预览</button>

ログイン後にコピー

印刷プレビュー関数の作成

印刷ボタンで、printPreview() という名前の関数を呼び出して印刷を実装する必要があります。プレビュー機能。関数コードは次のとおりです。

function printPreview(){
  //创建新的窗口
  var printWindow = window.open('', 'printWindow', 'height=600, width=800');

  //将样式表和HTML代码添加到新窗口中
  printWindow.document.write('<html><head>');
  printWindow.document.write('<link href="print.css" rel="stylesheet" type="text/css" media="print"/>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(document.getElementById('printContent').innerHTML);//printContent为需要打印的内容区域的ID，需要在页面中定义
  printWindow.document.write('</body></html>');

  //设置新窗口的打印样式和相关属性
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}

ログイン後にコピー

上記のコードでは、まず printWindow という名前の新しいウィンドウを作成し、そのウィンドウにスタイルシートと HTML コードを追加します。ここでは print.css という CSS スタイルシートを使用していることに注意してください。これは印刷時にのみ有効になります。次に、新しいウィンドウの印刷スタイルとプロパティを設定し、印刷プレビューのために画面上にウィンドウをポップアップ表示します。最後に、印刷が完了したらウィンドウを閉じます。

印刷スタイルの設定

印刷プレビュー機能に、印刷用のCSSスタイルシートを追加しました。以下は、一般的に使用される印刷スタイルを含む print.css ファイルの例のコードです。

/*隐藏页面中的所有元素*/
* {
  display:none;
}

/*显示需要打印的区域*/
#printContent {
  display:block;
}

/*设置打印页面的字体和颜色*/
body {
  font-family:宋体, Arial;
  font-size:16px;
  color:#000;
}

/*为打印页面进行分页*/
.my-pagebreak{
  page-break-after: always;
}

/*设置打印页面的边距*/
@media print {
  @page {
    margin:20mm 15mm !important;
  }
}

ログイン後にコピー

ここでは、CSS を使用してページ内のすべての要素を非表示にし、印刷する必要がある領域のみを表示します。 . .同時に、印刷するページのフォントと色を設定し、ページのページネーションと余白を設定します。

ページレイアウトの調整

デバイスによって印刷用紙のサイズが異なる場合があるため、デバイスの印刷用紙サイズに応じて印刷ページのレイアウトを調整する必要があります。デバイス。 window.matchMedia() メソッドを使用して、現在のデバイスの表示サイズを決定し、それに応じて印刷ページのレイアウトを調整できます。コードは次のとおりです。

function printPreview(){
  //创建新的窗口
  var printWindow = window.open('', 'printWindow', 'height=600, width=800');

  //根据设备的显示尺寸调整页面布局
  if (window.matchMedia('print and (max-width: 768px)').matches) {
    //设备宽度小于768px，调整页面布局
    //...
  } else if (window.matchMedia('print and (max-width: 992px)').matches) {
    //设备宽度小于992px，调整页面布局
    //...
  } else {
    //设备宽度大于等于992px，调整页面布局
    //...
  }

  //将样式表和HTML代码添加到新窗口中
  printWindow.document.write('<html><head>');
  printWindow.document.write('<link href="print.css" rel="stylesheet" type="text/css" media="print"/>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(document.getElementById('printContent').innerHTML);//printContent为需要打印的内容区域的ID，需要在页面中定义
  printWindow.document.write('</body></html>');

  //设置新窗口的打印样式和相关属性
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}

ログイン後にコピー

上記のコードでは、window.matchMedia() メソッドを使用して、現在のデバイスの表示サイズを決定し、さまざまな幅の範囲に従ってページレイアウトを調整します。実際の状況に応じて、印刷ページのレイアウトを自分で調整できます。

概要

JavaScript に印刷プレビューを実装すると、印刷ページの効果をより正確かつ正確に制御できるようになり、印刷エクスペリエンスが向上します。実装プロセス中に、印刷効果の一貫性を確保するために、さまざまなデバイスサイズやブラウザーの特性に応じてスタイルとレイアウトを調整する必要があることに注意してください。同時に、CSS3 の @page ルールなどの他のテクノロジーを使用して、印刷ページ効果の制御をさらに改善することもできます。

以上がJavaScriptで印刷プレビュー機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。