解决 html2pdf 导出不清晰及文字截断问题

原创
前端路迹
2022-9-20 20:27
编辑于 2022-9-21 21:51

导出不清晰

html2pdf 默认配置导出的pdf看着很不清晰,原因是 html2pdf 是利用的 html2canvas 将网页生成图片,然后再生成的pdf,html2canvas 默认生成的图片分辨率较低,可以通过配置 scale 来增加图片分辨率。

var element = document.getElementById('element-to-print');
var opt = 
  html2canvas:  { scale: 4 },
};

html2pdf(element, opt);

文字截断问题

导出的pdf 可能会出现下图所示问题。

生成的图片由于pdf分页会导致图片被裁切,而裁切的位置并不知道是否有文字。

Page-breaks

一种方案是利用 pagebreak 的配置。比如配置 avoid(配置那些元素不能被截取)。

html2pdf().set({
  pagebreak: {  avoid: ['img','.avoid-break'] }
});

在不想被换行的元素上增加上面的CSS。

<div class="avoid-break">
不想被截断的文字
</div>

单元化高度

上面的方案在多行文字的时候还是不能很好的解决。因此我想到一个单元高度的方案。也就是将每一行的高度固定,然后所有的元素都是这个高度的倍数。最后通过设置页面的margin,控制页面内容的高度是每一行高度的倍数。比如我这里设置的每一行的高度是24。然后通过测试,配置margin,最后基本上能完美解决文字截断的问题。

* {
  line-height: 24px;
}
img {
   height: 48px;
}
html2pdf(element , {
    margin: [3, 0, 2, 0],
    html2canvas: { scale: 4 },
})

可以写一个带背景的元素导出来测试 pdf 一页的高度是多少像素。

var div =document.createElement('div')
div.style.background='red'
div.style.height="1122px"
html2pdf(div)

我这里经过测试,发现一页的高度是1122px。然后配置margin,保证一页的内容高度是 24px的倍数。

最终测试。高度为 1104px(24*46),然后margin 配置 [3, 0, 2, 0] 能满足。

转载请注明出处。本文地址: https://www.qinshenxue.com/article/solve-the-problem-of-unclear-html2pdf-export-and-text-truncation.html
关注 & 咨询问题