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

作者: 饿了么配送员 | 来源:发表于2020-08-25 09:23 被阅读0次

7.记录Vue项目插件打印页面所需部分
vue html页面打印功能vue-print
jquery中的插件hqprint实现页面局部打印
前端vue项目实现单页打印功能
vue项目中使用vue-cropper图片裁剪
vue打印部分页面内容
Vue+ElementUI+xlsx实现读取xlsx文件并展示在
chrome安装vue-devtools插件
03jqprint插件打印页面css失效的解决办法
vue3.0结合electron electron安装很慢,如何

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

需要用到打印组件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