7.记录Vue项目插件打印页面所需部分

实现下面点击打印弹出打印的效果

需要用到打印组件vue-print-nb，安装 npm install vue-print-nb --save

在main.js文件中注册

import Print from 'vue-print-nb'

Vue.use(Print);

页面中使用,给需要打印的容器加一个id="printMe"，打印按钮传入这个id

打印时样式消失了
样式消失了的根本原因是写在打印内容外层的样式以及使用的一些框架的样式没有 在打印时 拿到的实际是打印块的iframe内容，如果明知道这块的内容需要打印，表格或者块内容不要使用任何UI框架以及其它外部scss或者less的内容,外部的类名拿不到，里面的所有样式拿不到， 要么单独根据api写上引入的样式地址，直方便便捷的方式是内联样式或者是写内部样式

<div class="box">
    <div id="printTest">
      <div class="print-style">打印的相关内容</div>
    <div>       
 </div>
  <style lang="scss" scoped>
    .box { } //无效
    #printTest { } //无效
    .print-style { } //写在这里的有效果
  </style>

转载与：https://juejin.cn/post/6882565127246184455