vue中实现页面局部打印效果终极实现方案

vue中完成局部打印的功能

vue中无法使用传统的打印注释的方式实现局部打印，下面我为大家提供两种vue中实现局部打印的方式

第一种（需要的打开新的窗口，用户有感知）

实现思路：获取需要打印的部分，打开新的窗口，将需要打印的部分放到新的窗口， 并且调用print方法实现打印，新页面只有需要打印的东西，所以可以直接全局打印

	var print= document.getElementById("print").innerHTML;
	var newWindow = window.open();
	newWindow.document.write(dom);
	newWindow.print();

这种方式我们需要把样式写成行内样式，并且打开的窗口不关闭，原本的页面也无法操作

第二种（用户无感知）

实现思路：思路就是将需要打印的元素插入到body下，将html上设置一个自定义的属性data-print=“true”，然后css使用媒体查询监听打印事件，将#app节点设置为display:none，这样页面下就只剩下需要打印的节点了，并且媒体查询效果只会作用于打印窗口，我们的页面上是不会有影响的

/* 隐藏app元素，让页面只剩下需要打印的部分 */
<style lang="scss">
  @media print {
    html[data-print='true'] {
      #app {
        display: none;
      }

      .order_footer {
        display: none;
      }
    }
  }
</style>

通过媒体查询，监听print事件，然后隐藏app，这时候页面上只剩下需要打印的部分。
并且这段样式不会让页面元素隐藏，只会生效在打开的打印窗口上，用户无感知，完美实现
使用vue3的teleport组件可以将元素插入到指定元素下，vue2可以在onMonted的时候使用原生写法将$el挂载到指定节点

<script>
	const visible = ref(false);
	
	const init = () => {
   		const html = document.getElementsByTagName('html')[0];
   		html.setAttribute('data-print', 'true');
	};
  	
	const onClose = () => {
	    const html = document.getElementsByTagName('html')[0];
	    html.setAttribute('data-print', 'false');
	    visible.value = false;
	};

	const onPrint = () => {
	    window.print();
	    onClose();
	};
</script>

 <teleport to="body">
 	 <div> </div>
 	 <div class="order_footer">
        <el-button plain type="primary" @click="onClose">关闭</el-button>
        <el-button type="primary" @click="onPrint">打印</el-button>
     </div>
 </teleport>

我这里打印的是一个弹窗，所以我在弹窗打开的时候，设置了html.setAttribute(‘data-print’, ‘true’);。在弹窗关闭的时候再设置为html.setAttribute(‘data-print’, ‘false’);就可以只打印弹窗部分了。
如果打印的只是页面上的某个节点，可以参考主题切换的思路，html[data-print=‘true’]的时候写一套样式，html[data-print=‘false’]的时候写一套样式，这样打印出来就是另一套样式了，或者就直接专门写一个组件设置为dispaly:none，在需要打印的时候再显示出来，也是一样的效果！！！

以上就是我的两种思路，亲测有效，如果有用就点个赞呗！！！