VSCode 環境構築

Chrome108系でchart-jsの印刷プレビュー時に印刷数が膨大に

※本サイトはPR表記を含みます。

原因: Chromeの108系へのバージョンアップが影響

ChartJS 2系にある .chartjs-size-monitor-expand > div の、width/height が元として、Chrome/Edge 108系 で印刷するときに、丸ごと印刷対象になってしまう現象がありました。

結果、膨大なページ数に。

この問題は Chromiumイシューにも上がっています。

■ Chromiumイシュー参考URL
https://bugs.chromium.org/p/chromium/issues/detail?id=1399313

Chart-js2系では new 時に <div> が出力されるぽい。 ※Chartjs3系以降では出力されない

デベロッパーツールの「検証」にてソースコードを確認し、以下のようなタグ出力が確認できました。

<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
    <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
</div>

 

対処: CSSメディアクエリでプリント時にのみ div を非表示にする

/* chart-jsハック: Chrome108系: 印刷数が膨大になるのを防ぐ */
@media print {
    .chartjs-size-monitor-expand > div {
        display: none !important;
    }

    .chartjs-size-monitor-shrink > div {
        display: none !important;
    }
}

当該CSSファイルにて、上記スタイルシートを追記することで、期待通りなページ数になるはずです。

 

また、ChartJSの依存がなければ、3系や4系にアップデートを含め検討するのはありかと思います（ハックじゃなくて、アプデ正義）

ただし、ChartJSのメジャーアップデートにより、ソースコードの修正が必要になることが予想されるます。(3系や4系の書き方に)

その場合、公式ドキュメントを参照しつつ、調整しましょう。

 

余談

ほっといたらChrome修正版がリリースされるかもね？

-VSCode, 環境構築
-,