最近有个需求:批量打印个人信息卡,卡片内容有个人头像和背景图片等。

实现过程中出现的问题:图片偶发性加载一半或者完全没有图片。

解决:等待图片完全加载完毕才调用打印方法。

实现如下:

//html部分

<div class="infoCard"   v-for="(item,index) in dataList" :key="item.id" class="bgPic">

<img @load="loadImg" :src="item.imageUrl>

<div style="page-break-before: always"></div>  --分页

</div>

//js部分:加载完成才打印

loadImg(val){this.imgList.push(val);if(this.imgList.length==this.dataList.length){window.print();this.imgList=[]...}
},

//css部分:每个分页背景图设置

.bgPic{width: 100%;height: 100%;background-repeat: no-repeat;background-size: cover;background-image: url('../../assets/img/bg/infoBgPic.jpg');padding:20px;box-sizing: border-box;margin-bottom: 20px;//分页的缝隙,否则会导致分页图片内容上移
}

批量打印图片不显示的问题相关推荐

  1. html js 打印 图片不显示 canvas

    html js 打印 图片不显示 canvas 出现这个原因是因为 用的是 canvas 我们要将canvas 转成img 将之前的 canvas 替换掉 !!! 要打印的结构 你们的结构可能和我不一 ...

  2. 用条码打印软件批量打印图片

    我们在用条码打印软件制作商品标签的时候,标签上的条形码和二维码是可以直接在软件中绘制,但是有时候我们会批量打印带图片的学生证.工作证等标签的时候,或者将本来就有的条形码.二维码图片批量导入到软件中直接 ...

  3. 条码打印机如何批量打印图片

    条码打印机打印带图片的标签其实不难,但是如果是想要将大量图片标签批量打印出来就有些令人头疼了.因为将图片逐个导入标签内进行打印好使费力易出错,显然不现实.比较实际的解决方法就是,将所要打印的图片放在一 ...

  4. ssm lodop打印图片不显示

    在打印预览的时候图片就是不显示 最终解决方案就是修改过滤器 转载于:https://www.cnblogs.com/NCL--/p/11051687.html

  5. html打印图片不显示不全,Word里图片显示全打印不全是怎么回事

    打印Word文档的时候,选择的是全部打印,但是在打印的时候,个别页面却出现了打印显示不全的情况,这种问题应该如何解决呢?下面就跟着小编来看看吧. 情况一:打印机驱动可能有问题: 解决方式:点击[开始] ...

  6. 【iReport】实际开发中,解决iReport中打印图片不显示问题

    ireport  中增加图片,添加上属性,但是运行时报错如下,是属性logoPath没有声明到map中 1. Parameter not found : logoPath net.sf.jasperr ...

  7. 打印图片一直显示连接传真服务器,连接w7共享的

    2009-07-28 请问两台电脑如何设置才能共用一台 打印机与电脑连接 1.关闭计算机的电源,将打印机中一切残留的绝缘胶带.泡沫材料或各种保护固定件取开. 2.把打印机平稳地安放在距离电脑适当的位置 ...

  8. 用条码标签打印软件批量打印照片

    一些规模比较大的企业打印带照片的员工工作证或学校打印学生证.借书证等,由于数据量比较大,往往采集的时候照片是单独一个文件夹存放的,如何从文件夹里读取批量打印是个头疼的问题,推荐使用恒佑科技的<L ...

  9. img绝对路径图片显示_使用python爬虫去风景图片网站批量下载图片

    使用python爬虫(requests,BeautifulSoup)去风景图片网站批量下载图片 1.写代码背景: 今天闲来无事,想弄点图片放到电脑,方便以后使用,故去百度查找一些风景图片网站,发现图片 ...

  10. excel怎么批量插行_条码打印软件如何批量打印条形码图片(一)

    条码打印软件可以批量打印条形码这个大家都知道,但是如果是已经生成好的条形码图片怎么批量打印呢?如果你遇到这种情况,别着急,今天就给大家用两种方法演示一下如何用条码打印软件批量打印条形码图片. 方法一, ...

最新文章

  1. Cocoa pods的安装
  2. Apache部署网页-Ubuntu16.04
  3. php mysql odbc_javascript连接mysql与php通过odbc连接任意数据库的实例
  4. 执行远程服务器上的脚本失败?(环境变量引起的问题)
  5. Go语言基础(四)—String与其他基本数据类型的转换
  6. 腾讯整治扫码点餐强制关注公众号问题
  7. VB中对AutoCAD对象图形文件操作
  8. (8)USB协议 —— 高速模式握手过程
  9. abb机器人goto指令用法_详解ABB机器人编程含中英文指令对照
  10. Pytorch并行计算(一): DataParallel
  11. filecoin lotus 转账fil流程和gas计算
  12. stm32h7内存分配_【STM32H7教程】第25章 STM32H7的TCM,SRAM等五塊內存基礎知識
  13. Imperva WAF Bypass【翻译】
  14. 小米电视怎么下载软件?用一起看TV宅家不无聊
  15. web 流程设计器探究
  16. ROOT(a Data analysis Framework)-Note5: iSTEP day2-TH1::Fit()
  17. linux输入法搜狗 修复,搜狗输入法自带修复功能,可以解决无法打字的问题
  18. 自动化部署工具瓦力(walle)的简单项目配置步骤
  19. Best Fitting Hyperplanes for Classification(用于分类的最佳拟合超平面)
  20. Linux操作系统常用命令整理

热门文章

  1. eova常用前端组件介绍
  2. python-回文字符串
  3. 尚学堂__百战程序员__1573题------第一章 初始java
  4. java如何验证手机号码_Java 手机号码正则表达式验证
  5. 佳能lbp611cn硒鼓_佳能lbp611cn说明书
  6. 中文实体关系抽取实践
  7. 推荐 4 个开源小程序
  8. axure教程:产品设计流程图
  9. 从日本动漫看项目管理
  10. 使用zlog实现日志记录