1、网上方法

1、

先将页面上不需要打印的部分display设为none，只留下需要打印的部分，然后打印完再将display设置回来，缺点是对于根元素display有的为flex有的为block的不太适用，需要reload页面

2、

取出需要打印部分的html，将html页面的body替换掉，然后打印完替换回来，缺点是如果页面复杂且css是一层一层写的就容易在打印的时候丢失样式

3、

自定义一个vue组件，里面放一个iframe，然后把需要打印的部分绑定到这个iframe中，缺点是组件编写繁琐，获取css样式也很麻烦

2、个人实现

因为页面不复杂，所以选择了第二种方法

绑定ref

给需要打印的部分最外层套一个大的div，然后绑定ref

doPrint() {
  // 设置要打印区域
  const printArea = this.$refs.print.innerHTML
  //console.log(printArea)
  // 存储原区域
  // const oldArea = window.document.body.innerHTML
  // 复制给body，并执行window.print打印功能
  document.body.innerHTML = printArea
  window.print()
  // 还原原区域
  location.reload()
}

CSS样式

通过$refs获取节点，并且获取节点内容，复制给页面body，window.print()调用完之后将原来的复制回来，但是发现复制回来之后再次点击打印不生效了。。。暂时没找到原因，因此reload了页面