使用vue-print-nb插件页面空白以及打印没有样式问题
在使用vue-print-nb中遇到两个问题:
第一个问题:点击打印后,打印的内容是一片空白
vue-print-nb的原理大概是在你的页面上创建一个iframe,然后把你要打印的那一个div抓出来给iframe。
如上图所示,最后把iframe添加到body中;
当我们点击‘打印’的时候,其实就是调用iframe的print()方法,这样浏览器就自动弹出iframe打印的窗口了;
但问题是,当我点击打印后,打印的内容是一片空白,什么都没有?
为了方便调试,我把vue-print-nb的代码复制到项目中,这样可以方便调试。
当我直接在浏览器调试窗口上输入如下命令(也就是调用iframe的print方法)时:
打印内容是正常显示的:
但,为什么插件里调print就一片空白呢?
我猜可以是时机不对...或者说是时机还没到....怎么办..
所以我直接给它包个setTimeout...
然后,页面一刷新...可以了....但是没有样式
第二个问题 ,设置样式不生效
插件是支持个iframe引入一个css文件的:
但不知道为什么样式在打印时不生效...
最后,我直接写在当前的组件中,就okl了:
转载于:https://www.cnblogs.com/thing/p/11152058.html
使用vue-print-nb插件页面空白以及打印没有样式问题相关推荐
- Vue -print - nb 打印插件 使用详解 以及连打操作
Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...
- vue框架开发出现页面空白、白屏的解决方法总汇
vue框架开发出现页面空白.白屏的解决方法总汇 参考文章: (1)vue框架开发出现页面空白.白屏的解决方法总汇 (2)https://www.cnblogs.com/love314159/artic ...
- vue使用history模式页面空白
之前负责了一个项目,使用的是vue.为了避免在地址链接的时候出现问题后端要求去掉#号,也就是使用history模式. 更改history模式后打包部署后发现页面空白.查询了下官网的文档资料https: ...
- Vue安装axios后页面空白问题
问题 在使用npm install axios安装了axios,并在main.js中配置完成之后,启动Vue项目,访问页面为空白,查看页面元素,控制台报红TypeError: setting ge ...
- vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
- vue ie11打包后页面空白
vue打包后不兼容ie Promise问题 Promise问题 ie是个神奇的浏览器不兼容es6,也就不兼容promise.解决方法 npm install --save babel-polyfill ...
- html meta 跳转 白屏,vue使用keepAlive之后页面空白白屏?route和router什么区别呢?...
问题描述: vue使用keepAlive之后页面空白,报错:TypeError: Cannot read property 'keepAlive' of undefined... 为了实现页面跳转之后 ...
- vue路由匹配上之后,但页面空白的问题
在vue项目中,可能会遇到路由匹配上之后,页面空白没有内容的情况,就像下面截图所示: 于是就查看了一些其他朋友对该问题的回答,主要有下面几点: 1.路由配置重复,如果配置了两个重复的路由,比如配置了两 ...
- 解决vue低版本ios,安卓手机浏览器打开H5页面空白的问题
低版ios手机ios8,ios9,安卓6以后的自带浏览器打开VUE开发的H5页面有时候会出现白屏的问题,这是因为vue 项目中es6的方法和语法在这些低版本的手机上不支持,解决办法 es6转es5 一 ...
- vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
最新文章
- 我在Suse 11 Sp3上使用anaconda安装TensorFlow的过程记录
- ELKStack入门篇(三)之logstash收集日志写入redis
- Linux 创建交换(swap)分区
- 使用cgroup对指定用户使用的memory进行限制的一个具体例子
- Mysql学习总结(40)——MySql之Select用法汇总
- HTML5学习总结(2)——header/nav/footer/article/section/aside
- cortex-m3/m4栈回溯
- 蓝叠模拟器的通讯录位置
- 2016微信数据报告 大数据展示微信生活
- 群晖服务器显示灯,【群晖 DS119j 单盘位NAS 网络存储服务器使用总结】功能|配置|机身|指示灯_摘要频道_什么值得买...
- 科技战疫志愿精神如何延续?腾讯的答案是……
- Linux开放MySql 3306端口
- c语言wb是标识符,C语言文件 "w+"与"wb+"区别
- 通过C语言实现二分查找法
- 【渝粤题库】陕西师范大学600004 中级有机化学 作业(专升本)
- 简帛《老子》古本合校
- Sinatra 搭建服务和使用 POST 和 GET 请求服务示例(简单但实用)
- [转]网易相册照用不误(解决网易相册的跨服使用)突破防盗链
- C语言实现酒店管理系统
- All about Div内显示滚动桥