vue中使用window.print 打印html页面

1、print函数的打印功能是对整个页面作为打印对象的，要想打印部分内容，就需要将要打印的部分拿出来放到新的页面里面，来提供打印，例如以下代码：

页面标题

   
      test
      test
  
 
      test
      test
  

如果我们打印如下的页面效果，不要打印标题部分

test test
test test

我们需要新建一个vue组件test.vue将我们的css样式写入其中，如果你希望打印的内容和原页面内容不一样你可以自己写一套新的css文件引入组件，并去掉scope属性这样才能使css生效，因为组件css私有化不能作用到后来外面添加进来的html片段

如上图所示我们需要在组件中引入css,需要在组件中定义一个Id模块的div容器用来存放在页面中截取过来的html，因为webpack打包工具的关系在打包的过程中，所有的css文件都会加上编码，所以需要写在id里面，我们新添加的html编码都添加在其中。

2、在页面中引入主键，创建一个iframe用来打印截取的部分,将height，width设为0,隐藏标签不显示，仅供打印使用，你也可以动态创建iframe给src赋值的方式给它赋值组件，用后在移除掉

//loation=window.location