import Print from 'vue-print-nb' 1. Vue.use(Print); 1. 页面中使用,给需要打印的容器加一个id,打印按钮传入这个id html: 葫芦娃,葫芦娃 一根藤上七朵花 小小树藤是我家 啦啦啦啦 叮当当咚咚当当 浇不大 叮当当咚咚当当 是我家 啦啦啦啦 ... <el-form :model="form" :rules="rules" ref=...
1、将vue项目node-modules中的vue-print-nb/print文件夹下的所有内容拷贝出来，放到项目中。我这里是放到了src/assets/vue-print-nb目录下。2、修改拷贝的源码printarea.js中getBody()返回的。添加样式：style="height:auto"。3、修改main.js中的引用。解决。遗留问题：打印预览的最底部出现空白页，一般是由于margi...
第一个问题:点击打印后,打印的内容是一片空白 vue-print-nb的原理大概是在你的页面上创建一个iframe,然后把你要打印的那一个div抓出来给iframe。 如上图所示,最后把iframe添加到body中; 当我们点击‘打印’的时候,其实就是调用iframe的print()方法,这样浏览器就自动弹出iframe打印的窗口了; 但问题是,当我点击打...
1、安装vue-print-nb插件 npm install vue-print-nb --save 2、main.js中引用 import Print from 'vue-print-nb' Vue.use(Print) //注册 3、页面源码(复制粘贴即可) <template> 立即打印 <!-- 这句话很重要,如果通过display:none控制显隐会导致点击打印按钮生成空白--> <!--每一页的具体内容-...
使用vue3-print-nb打印时,如果没使用老师的CSS样式代码,可能会出现预览和页面效果不一样,样式丢失的问题;最终发现原因是需要打印的div,在写css样式时不能被父div包裹住. 错误写法(习惯这个写): .user-info-container { .user-info-box { } } 这样写预览时样式就会丢失。 正确写法 是要分开写: .user-info...
import Print from'vue-print-nb' Vue.use(Print); //注册 3,现在就可以使用了 1 2 3 4 5 div id="printTest" > 明月照于山间 清风来于江上 打印 4.如需通过链接地址打印:window.location.href = airway_bill; airway_bill为链接地址。 5.如果内容打印不全,在打印操作时点击更多设置,然后设置缩放...
使用vue-print-nb 打印table,数据是后端接口返回的动态数据,当时数据很多时,打印预览的表格还是只有一页,如下图:数据太多,中间省略未截图。打印预览如下,只有一页: 代码:(这里的table代码示例与我另一篇文章中的是一样的,此处不再详细贴了,大家点过去看吧:table) 序号 姓名 学号 性别 班级 {{it}} ...
2.1首先看能不能从element 着手,但是element 的table有设置Table-column Attributes 的width属性 但是是px不是百分百。 2.2既然element不行 那就从vue-print-nb 着手,首先 我们要清楚print的原理其实就是将我们要打印的id包裹的内容(其实是生成图片)放到一个iframe 然后再打印。那我们就走打印之前修改这些table>colgro...
最近项目中使用打印功能,使用vue-print-nb最后打印没有样式,刚开始以为是不支持css预处理(scss、stylus),结果发现不是这个问题,真正原因是: 下边是需要打印的div,在写css样式的时候,这个div不可以让父级给包裹(也就是不可以有别的父级包裹这个div),且父级不可以有样式!!!