使用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协议中,只 ...
随机推荐
- Matlab Tricks(二十一)—— 软阈值函数的实现
dj,k^=⎧⎩⎨⎪⎪dj,k−λ,dj,k≥λ0,otherwisedj,k+λ,dj,k≤−λ function y = soft(x, T) y = (x - abs(T) > 0) .* ...
- 算法 Tricks(六)—— 判断一个数是否为完全平方数
int(sqrt(n)) * int(sqrt(n)) == n ? 1:0; matlab 下判断一个数是否能开方的判断是: floor(sqrt(m))^2 == m
- Altera公司高速PCB布线指南
来至Altera公司的高速PCB布线指南,该文档言简意赅,深入浅出,对于日常高速PCB布局布线中经常碰到的一些问题进行了解析.例如:板材的选择,介电常数及损耗因子对高速高频线路的影响,传输线,阻抗控制 ...
- springboot 集成oauth2
未实现.首先实现spring security. 1. 关于oauth2 隐隐觉得集成oauth2,用好它是一个不太简单的事儿,需要对oauth2了解一番. oauth2比较好的参考,都是别人原创文章 ...
- jquery.cookie.js用法详解
创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话 ...
- 【转载】MySQL和Keepalived高可用双主复制
服务器主机IP和虚拟浮动IP配置 RealServer A 192.168.75.133 RealServer B 192.168.75.134 VIP A 192.168.75.110 VIP B ...
- github网页
GitHub主页 创建仓库 想必大家都有自己的Github账号吧,没有的可以到GitHub官网注册账号,注册完后,我们来下一步,在我们的GitHub上面右上角的New repository来创建一个仓 ...
- MinDoc v0.6 发布,轻量级文档在线管理系统
更新日志 新增 标签功能,可以根据标签组织项目 新增 用户删除功能,删除后的用户项目以及其他数据会自动转移到超级管理员账户上 新增 项目描述支持Markdown语法 优化 项目标签添加效果 优化 登录 ...
- liunx 桥接 上网 ip配置 外部网络访问
一.设置VMware 在vmware的[编辑]-->[虚拟网络编辑器]设置:将VMnet0设置为“桥接”,并桥接到宿主机器的网卡(可以是有线或者无线网络). 二.设置虚拟机系统(以cento ...
- 3D-Touch Home Screen Quick Actions 使用
1. 3D-Touch简单介绍 3D-Touch是iPhone 6s推出的一种可以让你与手机进行互动的全新方式.这一次,iPhone 能够感应你按压屏幕的力度.除了轻点.轻扫.双指开合这些熟悉的 Mu ...