过去几天我一直在网上查看文档和问题,但找不到与我的问题相关的类似问题。
似乎正在发生的是 JSPDF 正在根据任何给定表格或 div 的第一个文本节点的字体大小计算自己的行高。事实上,它似乎为任何文本节点创建了相同的字体高度间距,包括甚至不在元素内的随机测试文本。
我能找到的唯一解决方法是添加一堆负边距来改变第一个文本元素的位置,但这不是一个好的选择。
我通过使用 onclone() 回调附加一个子元素并比较 2 个布局,确认它没有在 HTML2CANVAS 内部发生。
我试过设置lineHeightFactor,它没有效果,设置line-height inline以确保它被使用。我什至将所有边距、填充和行高完全重置为 0,并且 JSPDF 仍然为任何给定 div 元素中的第一个文本元素添加额外的间距,而其他所有内容都相互堆叠。这不会发生在图像上,只有文本节点。
这是我用来触发 PDF 的:
let pdf = new jsPDF({
orientation: 'landscape',
unit: 'mm',
format: 'letter',
precision: 1,
})
pdf.addFileToVFS('Roboto.ttf', this.Base64.roboto)
pdf.addFont('Roboto.ttf', 'Roboto', 'normal')
pdf.addFileToVFS('RobotoBold.ttf', this.Base64.robotoBold)
pdf.addFont('RobotoBold.ttf', 'Roboto', 'bold')
window['html2canvas'] = html2canvas;
let html = document.querySelector('.sign-wrap')
html.style.display = 'block'
pdf.html(html, {
html2canvas: {
allowTaint: true,
useCORS: true,
scale: 0.2530,
logging: false,
},
callback: async (pdf) => {
pdf.save(`sign.pdf`)
html.style.display = 'none'
}
})
}