javascript - JavaScript/HTMLの対照的なレイヤー

Question

私のWebアプリケーションのベースは、多くの薄いタイルで構成されるマップです。したがって、このページを白黒プリンターを使用して印刷した結果は非常に悲惨です。

マップ上のいくつかのレイヤーに配置する可能性はありますか？それにより、マップがより対照的になりますか？

（印刷モードでタイルを交換することは悪い考えです、うん）。

Answer 1

2 つのルートがあります。まず、次のように印刷スタイルシートを追加します。

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

または、メディア宣言のない通常の css ファイルで、

@media print { 
    #my-map-element {
        display: none; /* just for an example */
    }
}

もう 1 つの方法は、印刷イベントが発生したときに JavaScript 関数を呼び出すことです。ただし、これは、私の知る限り、Firefox 6 以降と IE でのみサポートされています。

window.onbeforeprint = function() { /* ... */ }

JavaScript から印刷イベントを生成している場合は、次のコードを使用してブラウザーの互換性の問題を回避できます。

(function(){

  // make a copy of the native window.print
  var _print = this.print;

  // create a new window.print
  this.print = function () {
    // if `onbeforeprint` exists, call it.
    if (this.onbeforeprint) onbeforeprint(this); 
    // call the original `window.print`.
    _print(); 
    // if `onafterprint` exists, call it.
    if (this.onafterprint) onafterprint(this);
  }

}())

(ソース: https://stackoverflow.com/a/3339821/300011 )