iframe の contentWindow.print で印刷プレビューが表示されない

前提・実現したいこと

canvas の内容を印刷プレビューに表示させたいです。
画面全体は印刷領域に含めないようにしたい、また、最終的には canvas を非表示にして印刷させたいので、iframe を使用することを検討しました。

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

印刷プレビューが表示されません。
エラーメッセージは出力されていませんが、警告メッセージが表示されています。
Resource interpreted as Document but transferred with MIME type image/png

該当のソースコード

html
1<!DOCTYPE html>
2<body>
3  <div>
4    <button onClick=printText()>Print</button>
5  </div>
6  <canvas id="canvas"></canvas>
7
8  <iframe id="print-area" hidden></iframe>
9</body>
10
11<script>
12  function printText() {
13    const rnd = Math.random();
14
15    const canvas = document.getElementById('canvas');
16    var ctx = canvas.getContext('2d');
17    ctx.clearRect(0, 0, canvas.width, canvas.height);
18    ctx.fillText(rnd.toString(), 10, 20);
19
20    var iframe = document.getElementById("print-area");
21    canvas.toBlob(function(blob) {
22      iframe.src = URL.createObjectURL(blob);
23      const iframeWindow = iframe.contentWindow;
24      if (iframeWindow)
25        iframeWindow.print();
26    });
27  }
28</script>

試したこと

F12 でステップ実行した場合は印刷プレビューが表示されます。

補足情報（FW/ツールのバージョンなど）

Google Chrome 75.0.3770.142

行動規範の内容に同意します

回答2件

iframeにするならwindow.openで印刷用の子ウィンドウ開いて制御したほうがいいようにも思います。

投稿2019/07/25 12:58

m.ts10806

総合スコア80850

smallgeek

2019/07/26 02:22

window.open もよさそうですね。こちらも検討してみます。

m.ts10806

2019/07/26 02:24

iframeは取り扱いが面倒な印象なので、ちょっとレトロかもしれませんが結構この手は使ってます。

行動規範の内容に同意します

ベストアンサー

srcdoc 属性で

JavaScript
1    iframe.onload = function() {
2      iframe.contentWindow.print();
3    };
4    iframe.srcdoc = '<img src="' + canvas.toDataURL() + '" alt="" />';