我正在使用 html2pdf 从 html 代码创建 pdf。它使用 html2canvas 和 jsPDF。结果非常好,但与原始版本略有不同:字体大小和行高有点不同,因此页面末尾不正确。如果 div (具有固定的外观以便在 A4 页面上正确呈现),我真的需要一份副本。
有没有办法影响最终渲染中的字体?我现在制作pdf的方式是:
savePdf () {
this.pdfDialog = true
let opt = {
// if set firefox will not be able to print as pdf!...
// margin: 0,
filename: 'cv.pdf',
enableLinks: true,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
scale: 8,
useCORS: true,
width: 310,
letterRendering: true,
},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
}
html2pdf().set(opt).from(document.getElementById('printable-cv')).save()]
},
解决方案是给元素添加内联样式。就我而言,在 vuejs 中工作,我最终得到了以下代码:
<div class="presentazione" v-html="presentation" :style="presentationFont"></div>
我在使用Tailwind时遇到了类似的问题。找到了这个解决方案:
由于 html2canvas 将 div 标签附加到 body 来获取一些指标,因此我们可以执行以下操作:
@layer base {
img {
@apply inline-block;
}
}