打印或html2Canvas 转图片时表格左边或右边边框与其他地方相比变窄（不一致）、部分内容丢失

最新推荐文章于 2024-05-17 07:46:48 发布

琹箐

最新推荐文章于 2024-05-17 07:46:48 发布

阅读量3.1k

点赞数

分类专栏：前端笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_45327886/article/details/123840379

版权

前端同时被 2 个专栏收录

77 篇文章 3 订阅

订阅专栏

笔记

41 篇文章 0 订阅

订阅专栏

一、问题

二、解决方法

三、总结

一、问题

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%时会导致转图片时右侧部分内容部分丢失，解决了该问题。多次重复测试，没有发现末尾内容丢失的问题。