在vue中實現頁面指定內容打印

在vue開發中，我們會遇到很多關於打印的需求，我將比較常用的方法記錄一下。

 

我使用的方法是在頁面設置一個節點，獲取該節點，通過給該節點追加樣式來實現打印。

html頁面元素

<div id="review-print-box" v-show="false">
    需要打印的內容
</div>

v-show="false" 確保該節點不會在頁面中顯示

 

js實現打印

setPrint() {
  var html = document.getElementById("review-print-box").innerHTML;
  var w = window.open(location.href);
  var style = w.document.createElement("style");
  style.type = "text/css";
  style.innerText = `
    打印內容元素的樣式...
  `;
  w.document.getElementsByTagName("head").item(0).appendChild(style);
  w.document.body.innerHTML = html;
  w.document.close();
  w.print();
  w.close();
}

打印會在新的窗口實現打印