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

<h3>页面标题</h3>
<tabel id='tab'>
   <tr>
      <td>test</td>
      <td>test</td>
  </tr>
 <tr>
      <td>test</td>
      <td>test</td>
  </tr>
</table>
<style>
 table{
        color:red;
    }
</style>

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

test test
test test

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

<template>
    <div id="test"></div>
</template>
<style>
.test{
  table{
         color:red;
    }
}
</style>

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

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

<iframe id="print-iframe" :src="loation+'/#/test'" width='0' height='0'></iframe>
//loation=window.location
<script>
            var iframe=document.getElementById('print-iframe');
             var doc = iframe.contentWindow.document;
             var tcontent=document.getElementById('tab');//获取table表中数据
            doc.getElementById("test").innerHTML=tcontent.innerHTML;//将获取到html标签数据赋值给iframe中组件中id中，组件的样式将影响html标签数据
iframe.contentWindow.print();//调取iframe打印，数据过多打印会自动分页
</script>