jquery 印刷用ＣＳＳの追加

Question

実現したいこと

特定の要素（ボタン）をクリックした際にprint.cssを追加したい

発生している問題・エラーメッセージ

jqueryにて実装予定で、
現在のコードではFireFoxでは正常に動作するが、
Chorme,Edgeブラウザだと動作しない。
（Print.cssが追加されない）

該当のソースコード

<div id="main_container">
	<div id="container_box" class="container01 contents01">
    	<div class="price_title"><h3>価格</h3></div>
		<div id="form" class="form_item">
			<h3>フォーム名</h3>
			<h3>自動見積もり</h3>
			<div class="mitumori_head">
				<h4 class="mitumori_head_title">タイトル</h4>
				<div class="mitumori_txt">
					<p>このお見積りは当社WEBシステムによってお客様がご入力された内容を自動で計算した内容です。</p>
					<p>ご正式な注文内容によっては料金が変更する場合が御座います。</p>
				</div>
			</div>
			<div class="mitumori_item">
				<h4 class="price_total_t">合計金額：10000円</h4>
				<div id="print-btn">この見積の内容を印刷する</div>
			</div>
		</div>
	</div>
</div>

// 見積印刷用CSSを追加
$(function() {
  var printCSS = '<link rel="stylesheet" href="print.css" type="text/css" media="print">';

  // ボタンがクリックされたら印刷用CSSを追加
  $('#print-btn').click(function() {
    $('head').append(printCSS);
    window.print();
  });
});

$(window).on('afterprint', function() {
  $('link[href="print.css"]').remove();
});

.price_title, #print-btn {
	display:none;
}
.mitumori_head {
	display:block;
    text-align: center;
}

試したこと

<div id="print-btn">を<buttom>に変更する等ためしましたが、 Firefox以外のChorme,Edgeでは依然として動作しない。

Answer 1

この回答はGPT-4による自動生成回答です

ChromeやEdgeでは、window.print()を実行した直後にCSSが適用される前に印刷ダイアログが表示されるため、追加したCSSが反映されない可能性があります。

そのため、setTimeoutを使用してwindow.print()の実行を遅延させることで、CSSが適用されるのを待つことができます。

以下に修正したコードを示します。

// 見積印刷用CSSを追加
$(function() {
  var printCSS = '<link rel="stylesheet" href="print.css" type="text/css" media="print">';

  // ボタンがクリックされたら印刷用CSSを追加
  $('#print-btn').click(function() {
    $('head').append(printCSS);
    // window.print()の実行を遅延させる
    setTimeout(function() {
      window.print();
    }, 1000);  // 1000ミリ秒（1秒）後に実行
  });
});

$(window).on('afterprint', function() {
  $('link[href="print.css"]').remove();
});

この修正により、CSSが適用されるのを待ってから印刷ダイアログが表示されるようになります。ただし、setTimeoutの遅延時間は環境により調整が必要な場合があります。