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了页面
