在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();
}

打印会在新的窗口实现打印