使用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了:

使用vue-print-nb插件页面空白以及打印没有样式问题的更多相关文章
- 学习笔记-vue 打包去#和页面空白问题
文件资源路径是对的,但是页面空白.百度了很久找了一篇文章解决了. 1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html ...
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
- vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
- vue项目打包之后页面空白解决办法
之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPubl ...
- vue 打包后,页面空白及图片路径的问题
打包之后打开dist的页面显示空白: 1.记得改一下config下面的index.js中bulid模块导出的路径. 这里需要将 assetsPublicPath: '/'改为assetsPublicP ...
- vue项目页面空白
vue项目页面空白 今天新建项目,然后发现路由也改了 app.vue里面也是啥都没有, 但是访问http://localhost:8080/#/login 能访问 里面确实空白的 错误: 错误原因: ...
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...
- jupyter-notebook后home页面空白问题
jupyter-notebook后home页面空白问题 解决方案1 更换默认的浏览器,选择谷歌浏览器,很多360打不开的页面,更换谷歌后都能有效解决,并且确保是最新版本的google浏览器. 解决 ...
- vue项目强制清除页面缓存
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
随机推荐
- ATS项目更新(2) 命令行编译Studio解决方案
1: rem "D:\Microsoft Visual Studio 8\SDK\v2.0\Bin\sdkvars.bat" 2: D: 3: cd ..\..\..\..\..\ ...
- SecureCRT自动登录Linux并设置时间
#$language = "VBScript" #$interface = "1.0" crt.Screen.Synchronous = True ' This ...
- 在运行Hfile的MR如果任务client结束OOM
在运行MR将HDFS转换成HFile什么时候.例如,会发生以下的异常: 14/07/09 18:02:59 INFO mapred.JobClient: map 83% reduce 0% 14/0 ...
- [Gevent]gevent 网络抓取问答
我听说过gevent基于事件的异步处理功能 如何高效率,该项目已很少使用,今天是没什么学习一些简单的使用. 有正式书面一个非常好的教程 中国版的地址:http://xlambda.com/gevent ...
- 在Docker中创建Mongo容器的后续设置
后续设置包括设置数据库管理员账号密码.创建业务数据库以及设置账户密码 需要注意的是,在创建Mongo容器后,需要映射到本机 以管理员身份打开powershell 先切换到mongdo bash # ` ...
- Something write in FSE 2014
Now, I find a problem, I have become my personal CSDN into a personal electronic diary. Actually, th ...
- 2-19-使用apache搭建web网站
1 搭建一台测试web服务器 案例: 部门内部搭建一台WEB服务器,采用的IP地址和端口为192.168.10.34:80,首页采用index.html 文件.管理员E-mail地址为 xuegod@ ...
- 读BeautifulSoup官方文档之与bs有关的对象和属性(3)
上一节说到.string的条件很苛刻, 如果某个tag里面包含了超过一个children, 就会返回None, 但是这里提供另外一种方式 .strings, 它返回的是一个generator, 比如对 ...
- SQLSTATE[HY000]: General error: 1205 Lock wait timeout exceeded; try restarting transaction 解决方法
SHOW FULL PROCESSLIST; KILL 263071
- Win10《芒果TV》商店版双十一独家大礼,每日前100名用户免费领取7天VIP
为答谢大家对Win10<芒果TV>商店版一年以来一如既往的支持,2016年11月1日-11月30日期间,每天登录<芒果TV>UWP版(最新版本v3.1.3)的前100位用户可领 ...