在使用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插件页面空白以及打印没有样式问题相关推荐

  1. Vue -print - nb 打印插件 使用详解 以及连打操作

    Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...

  2. vue框架开发出现页面空白、白屏的解决方法总汇

    vue框架开发出现页面空白.白屏的解决方法总汇 参考文章: (1)vue框架开发出现页面空白.白屏的解决方法总汇 (2)https://www.cnblogs.com/love314159/artic ...

  3. vue使用history模式页面空白

    之前负责了一个项目,使用的是vue.为了避免在地址链接的时候出现问题后端要求去掉#号,也就是使用history模式. 更改history模式后打包部署后发现页面空白.查询了下官网的文档资料https: ...

  4. Vue安装axios后页面空白问题

    问题   在使用npm install axios安装了axios,并在main.js中配置完成之后,启动Vue项目,访问页面为空白,查看页面元素,控制台报红TypeError: setting ge ...

  5. vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...

  6. vue ie11打包后页面空白

    vue打包后不兼容ie Promise问题 Promise问题 ie是个神奇的浏览器不兼容es6,也就不兼容promise.解决方法 npm install --save babel-polyfill ...

  7. html meta 跳转 白屏,vue使用keepAlive之后页面空白白屏?route和router什么区别呢?...

    问题描述: vue使用keepAlive之后页面空白,报错:TypeError: Cannot read property 'keepAlive' of undefined... 为了实现页面跳转之后 ...

  8. vue路由匹配上之后,但页面空白的问题

    在vue项目中,可能会遇到路由匹配上之后,页面空白没有内容的情况,就像下面截图所示: 于是就查看了一些其他朋友对该问题的回答,主要有下面几点: 1.路由配置重复,如果配置了两个重复的路由,比如配置了两 ...

  9. 解决vue低版本ios,安卓手机浏览器打开H5页面空白的问题

    低版ios手机ios8,ios9,安卓6以后的自带浏览器打开VUE开发的H5页面有时候会出现白屏的问题,这是因为vue 项目中es6的方法和语法在这些低版本的手机上不支持,解决办法 es6转es5 一 ...

  10. vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法

    vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...

最新文章

  1. 我在Suse 11 Sp3上使用anaconda安装TensorFlow的过程记录
  2. ELKStack入门篇(三)之logstash收集日志写入redis
  3. Linux 创建交换(swap)分区
  4. 使用cgroup对指定用户使用的memory进行限制的一个具体例子
  5. Mysql学习总结(40)——MySql之Select用法汇总
  6. HTML5学习总结(2)——header/nav/footer/article/section/aside
  7. cortex-m3/m4栈回溯
  8. 蓝叠模拟器的通讯录位置
  9. 2016微信数据报告 大数据展示微信生活
  10. 群晖服务器显示灯,【群晖 DS119j 单盘位NAS 网络存储服务器使用总结】功能|配置|机身|指示灯_摘要频道_什么值得买...
  11. 科技战疫志愿精神如何延续?腾讯的答案是……
  12. Linux开放MySql 3306端口
  13. c语言wb是标识符,C语言文件 "w+"与"wb+"区别
  14. 通过C语言实现二分查找法
  15. 【渝粤题库】陕西师范大学600004 中级有机化学 作业(专升本)
  16. 简帛《老子》古本合校
  17. Sinatra 搭建服务和使用 POST 和 GET 请求服务示例(简单但实用)
  18. [转]网易相册照用不误(解决网易相册的跨服使用)突破防盗链
  19. C语言实现酒店管理系统
  20. All about Div内显示滚动桥

热门文章

  1. velocity模板使用建议
  2. poj 3841 Double Queue (AVL树入门)
  3. 利用模态DIV结合UpdateProgress防止页面重复提交
  4. 好想看故乡夏夜的天空
  5. python时间操作代码
  6. Ajax爬取今日头条街拍美女
  7. 为什么Bert的三个Embedding可以进行相加?
  8. 【关系抽取】从文本中进行关系抽取的几种不同的方法
  9. 【工大SCIR Lab】AAAI20 基于关键词注意力机制和回复弱监督的医疗对话槽填充研究...
  10. 【KG】知识图谱基本概念工程落地常见问题