vue使用print.js打印pdf出现图片文字重叠

660 阅读1分钟

vue:^2.6.10

print-js: ^1.6.0

参考链接

图片1 image.png 图片2 image.png

解决问题的主要代码: `

<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(已解决)

image.png

尝试解决问题经过:

1. 发现图片占据的高度不对,尝试在页面加载完成后用img的onLoad计算图片的高度。

❌此方案不可取。原因是:预览的高度和打印A4的高度不一致

2. 既然img是内联,那使用div包裹,img设为display:block块元素,即

<div>
    <img src="图片地址" style="display: block"/>
</div>

❌此方案不通。原因不明,实践结果表明重叠问题并未解决。

❓❓根据以上参考链接,出现图片与文字、图片与图片重叠的情况,有可能是img是内联元素,出现浮动,不占据完整空间?(此处是疑问句,望专业人士答疑解惑)