在JSPDF中重叠文本

Question

我有一个使用d3生成的仪表板页面，它显示了具有样式和日期的不同html表。我使用JSPdf将表导出为最终用户的pdf，现在的问题是当我在生产机器（屏幕稍小的另一台笔记本电脑）上尝试这个时，pdf正在显示表格，但有些文字是在他们的单元格之外重叠，我最终用scrabbeled文本，现在即使在我的屏幕上，只需要在我的导航器中放大我们的结果以最终得到一个以错误的方式显示一些数据的pdf，任何人都已经通过这个并有任何想法？我需要获得一个带有组织数据的pdf导出，这可能类似于我浏览器中显示的内容，因为由于某些原因，pdf上的结果与html网页输出不同。

这是GitHub上的一个问题，屏幕截图显示了问题：https://github.com/MrRio/jsPDF/issues/879

Answer 1

您可以使用SVG Crowbar或Hanpuku等工具将SVG画布保存为具有所有必要样式的SVG文件。然后，您可以使用Inkscape或Illustrator转换为PDF。

Answer 2

你看过样式表了吗？可能有一个print.css可能会影响输出，可能与您实际渲染的内容不同。

您还可以查看他们的“String Splitting”示例，他们遇到了类似的问题：

他们的例子的问题是垂直偏移

原文：

verticalOffset += (lines.length + 0.5) * size / 72

新：

verticalOffset += (lines.length + 2.5) * size / 72

Answer 3

由于你的问题与缩放（或不缩放）有关，我相信在这个问题上发生的讨论会有所帮助 - Using jspdf to save html page as pdf, saved pdf contains incomplete page content if browser is zoomed, Why?

基本上，诀窍是修复正在打印的页面大小，这样无论你是否缩放页面，保存的pdf总是以相同的大小。对我有用的是 - source.style.width = '1700px'; 在您的情况下，只需检查90％或110％缩放的宽度（因为这为您提供了正确的pdf），然后在jspdf save命令之前设置该宽度。我希望这对你有用。