问题:浏览器非打印预览页面能够显示图片,但调用print()方法进入打印预览界面时,只有谷歌显示图片,其他主流浏览器均不显示,如图:
非打印页:
进入打印页后:图片消失
主要代码如下(修改前):
<!-- 图片 -->
<div style="display: inline-block;margin-right: 50px;">
<img style="width: 200px" src="@/assets/images/fuwuhao.png" alt="">
<div style="font-size: 10.5px;font-family: '宋体';">服务号</div>
</div>
<div style="display: inline-block;margin-right: 50px;">
<img style="width: 200px" src="@/assets/images/dingyuehao.png" alt="">
<div style="font-size: 10.5px;font-family: '宋体';">订阅号</div>
</div>
<!-- 打印js-->
let resumeWindow = iframe.contentWindow
if (!window.showModalDialog) {
resumeWindow.print()
} else {
// 兼容IE8,不加前面这两句,只能打印出整个页面的预览效果,并不是简历原件的内容
resumeWindow.document.body.className += ' ext-ie'
resumeWindow.document.execCommand('print', false, null)
resumeWindow.print()
}
原因:图片加载需要时间,上述代码在图片为加载完就调用了print()方法
解决方案:用setTimeout()预留加载时间,我这边添加100ms,就可以在让图片有时间加载完再去调用print()
参考链接:
解决方案
Window setTimeout() 方法
修改后代码
let resumeWindow = iframe.contentWindow
if (!window.showModalDialog) {
setTimeout(function (){
resumeWindow.print()
},100)
} else {
// 兼容IE8,不加前面这两句,只能打印出整个页面的预览效果,并不是简历原件的内容
resumeWindow.document.body.className += ' ext-ie'
resumeWindow.document.execCommand('print', false, null)
setTimeout(function (){
resumeWindow.print()
},100)
}
效果: