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

  1. 学习笔记-vue 打包去#和页面空白问题

    文件资源路径是对的,但是页面空白.百度了很久找了一篇文章解决了. 1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html ...

  2. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

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

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

  4. vue项目打包之后页面空白解决办法

    之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPubl ...

  5. vue 打包后,页面空白及图片路径的问题

    打包之后打开dist的页面显示空白: 1.记得改一下config下面的index.js中bulid模块导出的路径. 这里需要将 assetsPublicPath: '/'改为assetsPublicP ...

  6. vue项目页面空白

    vue项目页面空白 今天新建项目,然后发现路由也改了 app.vue里面也是啥都没有, 但是访问http://localhost:8080/#/login 能访问 里面确实空白的 错误: 错误原因: ...

  7. vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决

    一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...

  8. jupyter-notebook后home页面空白问题

    jupyter-notebook后home页面空白问题 解决方案1   更换默认的浏览器,选择谷歌浏览器,很多360打不开的页面,更换谷歌后都能有效解决,并且确保是最新版本的google浏览器. 解决 ...

  9. vue项目强制清除页面缓存

    异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...

随机推荐

  1. 阿凡达是脸,教你的脸在线(包括URL和使用)

    官方网站:http://www.mcdonalds.at/avatar/ 英文版本号:lid=finland" target="_blank">http://www ...

  2. Fedora15下搭建QT开发环境及编译QT(提前一键安装完,qt编译所有必需库 yum install gcc-c++ libXtst-devel freetype freetype-devel fontconfig-devel libXrender-devel )

    看了不少linux上编译qt的文章,实际上直接通过yum 安装qt是最方便的,请参考<yum安装qt> 不过初步接触fedora,为了了解一下如何在linux上编译.安装开源代码,所以必须 ...

  3. cocos2d-x 显示触摸操作(单击显示效果浪潮,对于视频演示)-绩效转型

    http://blog.csdn.net/hitwhylz/article/details/26042751 首先是显示触摸操作. 在文章最后.对性能进行一些提升改造. 由于要演示我们的作品.使用试玩 ...

  4. PHP模拟POST提交数据并获得返回值之CURL方法(使用PHP extension,然后使用php_curl.dll,很不错)

    今天公司做个东西,需要条用同事的接口,我的代码和他的代码不在同一个域下,但是都是子域. a.ifensi.com与b.ifensi.com的关系. 我需要传递一个关联数组过去,他那边给我返回一个jso ...

  5. Bootstrap 单按钮下拉菜单

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  6. ELINK编程器典型场景之多APP文件下载

    有些应用场合中,单MCU内会采用BootLoader+APP1+APP2的加载模式,程序启动时先进入BootLoader程序,依据设定条件跳转至APPx应用运行:为满足此类需求,设计多达5个程序文件( ...

  7. Microsoft Enterprise Library 5.0 系列(三)

    一.简介及用途 在实际的项目开发中,我们总会需要对数据进行验证,以保证数据的可靠性,而为了使这些验证可以在不同的地方进行复用(如winform.web.WPF等),就需要将验证进行封装,EntLib的 ...

  8. 微信小程序把玩(二十九)video组件

    原文:微信小程序把玩(二十九)video组件 视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button ...

  9. 微信小程序把玩(十一)icon组件

    原文:微信小程序把玩(十一)icon组件 这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml <!--成功图标--> <icon t ...

  10. 基于QT的在线打字练习软件助手(C/S模型)good

    简介   通过基于QT中QTcpServer和QTcpSocket以及UI编程,实现了基于TCP协议的C/S模型在线打字练习软件助手,服务端处理各客户端打字数据,以及显示在线打字客户列表即实时更新打字 ...