目录
一、问题
1.使用html2canvas转图片时,发现转换后的图片表格边框粗细不一致。如图1-1所示,红色矩形框标记的地方明显比其他地方细一些。但是没有转图片之前设置的边框粗细是一致的,且页面中显示的粗细也是一致的。
2.使用html2canvas转图片时,部分内容丢失丢失。如图1-3所示,但查看了html页面中是有 最小方内容的如图3-2所示,是转图片时丢失的。
二、解决方法
1.针对问题1:转出的图片表格部分和与其他地方不一致。
1)通过用不同的软件打开后,发现,生成的图片距离左侧较近,如图 2-1所示,所以猜测可能是转换的时候由于距离左侧较近被剪裁掉了一部分,所以显示不全,看起来比其他地方线条细。
2)给需要转图片的最外层dom节点添加 padding后,问题解决,如图2-2所示
2.针对问题2:转出的图片下方部分缺失,当需要转换的html高度较高时出现的概率较大。
1)仔细检查后,猜测可能是由于flex布局没有自动换行,溢出导致。
但修改flex布局每个div的宽度为 30%(style="width: 30%; padding-bottom: 1em")后,发现换行并且显示了被剪裁的内容,如图2-3所示,所以不确定具体是什么原因导致的,但和 样式密切相关。
此时 需要转图片的最外层dom节点的宽度为 92%
源代码如下:
<div style="display: flex; flex-wrap: wrap">
<div
style="width: 50%; padding-bottom: 1em"
v-for="(item, key) in autographContent"
:key="key"
>
<div style="display: flex">
<span>{{ item.label }}</span>
<div
style="
border-bottom: 1px solid black;
width: 160px;
margin: 0 10px;
"
>
<img
v-if="item.img"
:src="item.img"
style="height: 30px; margin-bottom: 2px"
/>
<span v-else style="width: 160px">
{{ item.value }}
</span>
</div>
</div>
</div>
</div>
2)最终通过修改需要转图片的最外层dom节点的宽度:设置为99%,因宽度100%时会导致转图片时右侧部分内容部分丢失,解决了该问题。多次重复测试,没有发现末尾内容丢失的问题。
三、总结
1.以上表格边框粗细不一致、部分内容丢失问题都是 与 转图片前的html样式相关联的。所以当使用html2Canvas转图片时遇到类似的问题,可以通过检查 html样式和图片的区别,尝试通过更改样式的方式解决问题。
2.问题2,暂时没有搞明白原因,为什么宽度设置小时会自动换行,而之前会直接不显示?本来以为是高度有关的问题(因需要转图片的高度较高时该问题发生的频率更高),结果和宽度有关系。如有大佬知道原因,欢迎评论区交流,非常感谢!
/*
希望对你有帮助!
如有错误,欢迎指正,谢谢!
*/