JavaScriptとCSSは、ブラウザの印刷設(shè)定のヘッダーとフッターを制御できますか？

多くの開発者は、JavaScriptまたはCSSを使用して、デフォルトでのチェックのカスタマイズやヘッダーフッターコンテンツのカスタマイズなど、ブラウザ印刷ダイアログのヘッダーフッター設(shè)定を制御したいと考えています。ただし、これは簡(jiǎn)単な作業(yè)ではありません。この記事では、その実現(xiàn)可能性と限界を詳細(xì)に調(diào)べます。

問題の概要

目標(biāo)は、コードを介してブラウザ印刷設(shè)定のヘッダーとフッターのオプションを制御することです。特定の要件は次のとおりです。

1. ヘッダーフッターはデフォルトで無(wú)効になっています：ヘッダーフッターは、印刷時(shí)にデフォルトでは表示されません。
2. @media printのカスタムヘッダーフッター： @media printスタイルのルールを備えたカスタムヘッダーフッターコンテンツですが、この方法はprintJSプラグインを使用する場(chǎng)合は機(jī)能しません。

ユーザーが提供するコードスニペットは次のとおりです。

 html2canvas（this。$ refs.templatetoimg、{
  BackgroundColor：null、
  ユーザー：本當(dāng)、
  Windowheight：document.body.scrollheight、
}）。それから（canvas => {
  dom.style.height = 'calc（100VH -400px）'
  dom.style.overflow = 'auto'
  const url = canvas.todataurl（ 'image/jpg'）
  this.img = url
  const styles = "@media print {@page {height：100％;@top-left {content： 'top content';}@bottone-center {content： 'footer content';}}}"
  printjs（{
    印刷可能：url、
    タイプ：「畫像」、
    documenttitle：this.previewtitle（）、
    スタイル：スタイル、
    onloadingend：（）=> {
      this.printloading = false
      dom.style.height = 'auto'
      dom.style.overflow = '可視'
    }
  }）
}）

ソリューションと制限

重要なのは、次の點(diǎn)を理解することです。

1. ブラウザ印刷設(shè)定の制御性：ブラウザ印刷設(shè)定（ヘッダーとフッターを含む）は、ブラウザ自體またはオペレーティングシステムによって制御され、JavaScriptとCSSは直接干渉することはできません。
2. @media printの制限： @media print印刷スタイルを制御できますが、ブラウザの印刷設(shè)定を直接変更することはできません。 printJSプラグインは、 @media printを介して設(shè)定されたスタイルを無(wú)視する場(chǎng)合があります。
3. printJSプラグインの機(jī)能： printJSは、主にHTMLコンテンツまたは寫真を印刷するために使用され、ブラウザ印刷設(shè)定の直接の変更をサポートしていません。コードでは、 @media printスタイルをstyleパラメーターに渡してみましたが、 printJSではうまく機(jī)能しませんでした。

したがって、結(jié)論は次のとおりです。JavaScriptとCSSは、ブラウザの印刷設(shè)定のヘッダーとフッターのオプションを直接制御できません。これは、ブラウザとオペレーティングシステムの権限の範(fàn)囲內(nèi)にあります。

ヘッダーとフッターをカスタマイズするには、これらの要素を印刷コンテンツに直接追加するだけで、印刷時(shí)に表示され、印刷プラグインの影響を受けないことを確認(rèn)できます。開発者は、ブラウザの印刷設(shè)定を直接制御するというアイデアを放棄し、代わりに印刷コンテンツ自體にヘッダーとフッターの実裝に集中する必要があります。

以上がJavaScriptまたはCSSを介してブラウザ印刷設(shè)定でページの上部と終了を制御する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。