はじめに
先日、「中学生が自分だけのMarkdownエディターを作ってみた話」というふざけたタイトルで記事を投稿させていただいたのですが、本日はそのエディターに印刷機能をつけたお話です。
便利なので、もしよければ使ってみてください。
コード
document.getElementById('print-btn').addEventListener('click', () => {
// 印刷用にiframeを作成する
const iframe = document.createElement('iframe');
iframe.srcdoc = "<!DOCTYPE html>";
document.body.appendChild(iframe);
iframe.style.display = 'none';
iframe.onload = () => {
iframe.contentDocument.body.appendChild(document.getElementById('preview').cloneNode(true));
document.querySelectorAll("link[rel='stylesheet']").forEach(el => iframe.contentDocument.head.appendChild(el.cloneNode(true)))
iframe.contentWindow.print();
iframe.contentWindow.addEventListener('afterprint', () => iframe.remove());
}
})
iflameに内容をつけたし、それを印刷する形を取りました。
idがpreviewなdivだけを印刷したかったので、そんな方法を調べたところ、行き着いた方法です。
overviewにハマった！
ただ、この方法だとマークダウンの限られたところしか表示されない。
Markdownを短くするために、編集しているところ以外はスクロールできるようにしたのですが、その関係で表示されるところしか印刷できないようになってしまいました。
解決
cssのoverviewを<head>内の<style>で読み込むように。
そして、iflameには外部スタイルシートのデザインしか読み込まないよう変更し、解決しました。
参考文献
サイトを参考にさせていただきました。