特定の範囲のみプリントアウトする方法[Chrome/Nuxt.js/CSS]

解決したいこと

ある特定の要素（divタグの範囲内など）をプリントアウトしたい。
そもそものやり方と、Chromeの場合、背景色のCSSがあたらない問題に直面したので
備忘録を書きます。

まとめると本記事で解決することは以下の通りです。

• ボタンを押したら特定の範囲のみプリントアウトできる
• Chromeで背景色が反映されない問題を解決する

注：Nuxt.jsを使っている前提で書きますのでご了承ください。
部分的に置き換えてもらえたら普通に使えると思います。

特定の範囲のみプリントアウトする

実装方針は色々考えましたが、一番コード量が少なくて済みシンプルな方法を選択しました。
以下の手順で実装します。

1. プリントアウトのボタンが押されたら、プリントアウトした特定の要素以外の要素をDOMから全て除外
2. プリントウィンドウを開く
3. プリントウィンドウからメインウィンドウにコントロールが戻ったらリロードすることで元の状態に戻す

具体的な実装は以下の通りです。

component.vue

<template>
  <div>
　　<p>プリントされない。</p>
    <div id="printable">
　　　<p>プリントされます。</p>
    </div>

　　 <button @click="print()">完了</button>
  </div>
</template>

<script>
export default {
  methods: {
    print() {
      window.document.body.innerHTML = document.getElementById(
        'printable'
      ).innerHTML  // (1
      window.print()   // (2
      this.$router.go({ path: this.$router.currentRoute.path, force: true }) // (3
    }
  }
}
</script>

この方法であればcomponent分けしていても、
親であるページに関係なくプリントしたい要素だけプリント出来ると思います。

Chromeでmedia:print時に背景色が反映されない問題の解決

bodyに以下のプロパティーを設定すれば解決できます。

assets/css/app.scss

body {
   -webkit-print-color-adjust: exact;
}

まとめ

特定範囲のプリント、あっさり出来ると思ってましたがこれって言う実装がなく（もしかしたらある？)...
いくつかの方法で実装しましたが、今回紹介した方法に落ち着きました。
コード量も３行程度なのでお手軽ですし^^
では。