JSPDF中的重叠文本答案

【问题标题】：Overlapping text in JSPDFJSPDF中的重叠文本
【发布时间】：2017-05-19 00:16:18
【问题描述】：

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

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

【问题讨论】：

在这样的问题中，一个例子有很长的路要走。没有看到它，你会得到最好的一般建议。

标签： javascript html d3.js jspdf html2canvas

【解决方案1】：

由于您的问题与缩放（或不缩放）有关，我相信在这个问题上发生的讨论会有所帮助 - 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 命令之前设置该宽度。我希望这对你有用。

【讨论】：

非常感谢，我们继续并使用一些 VBA 将导出更改为 ppt 文件，如果我有时间测试 pdf 导出，我将使用您的方法，再次感谢您的帮助好先生:)

【解决方案2】：

你看过样式表了吗？可能有一个 print.css 可能会影响输出，并且可能与您实际呈现的不同。

您还可以查看他们的“字符串拆分”示例，他们遇到了类似的问题：

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

原文：

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

新：

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

【讨论】：

【解决方案3】：

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

【讨论】：