vue:^2.6.10
print-js: ^1.6.0
图片1
图片2
解决问题的主要代码: `
<table v-for="item in picList" :key="item" style="border: none">
<tr class="text-center" style="border: 0">
<td style="padding: 0; border: 0">
<img :src="item" width="100%" style="display: block" />
</td>
</tr>
</table>
注:若出现空白页面,检查tr与td的padding和border是否为0。
图片3(已解决)
尝试解决问题经过:
1. 发现图片占据的高度不对,尝试在页面加载完成后用img的onLoad计算图片的高度。
❌此方案不可取。原因是:预览的高度和打印A4的高度不一致
2. 既然img是内联,那使用div包裹,img设为display:block块元素,即
<div>
<img src="图片地址" style="display: block"/>
</div>
❌此方案不通。原因不明,实践结果表明重叠问题并未解决。
❓❓根据以上参考链接,出现图片与文字、图片与图片重叠的情况,有可能是img是内联元素,出现浮动,不占据完整空间?(此处是疑问句,望专业人士答疑解惑)