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

导出不清晰

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] 能满足。