javascript - jsPDF向表格添加错误的空格

标签 javascript html angularjs jspdf

我正在尝试使用 jsPDF 的 fromHTML 函数将 html 表转换为 pdf。这在大多数情况下都有效,但对于我的一个屏幕,表格被错误添加。 Here是显示屏幕上的输入、输出以及从屏幕的另一部分正确生成的输出的图像。

以下是该表的 HTML:

<table class="table table-condensed">
    <thead>
        <tr>
            <th></th>
            <th>{{ report.leftHeader }}</th>
            <th>{{ report.rightHeader }}</th>
            <th>Difference</th>
        </tr>
    </thead>
    <tbody id="tableBody">
        <tr ng-repeat="metric in report.leftMetrics">
            <td>{{ metric.label }}</td>
            <td ng-switch="metric.leftEditable && !printerFriendly">
                <input ng-switch-when="true" ng-model="metric.leftValue" ng-change="report.updateComputedValues(metric);" min="0" required />
                <span ng-switch-default>{{ metric.leftValue | numberFormat : metric.dataType }}</span>
            </td>
            <td ng-switch="metric.rightEditable && !printerFriendly">
                <input ng-switch-when="true" ng-model="metric.rightValue" ng-change="report.updateComputedValues(metric)" min="0" required />
                <span ng-switch-default>{{ metric.rightValue | numberFormat : metric.dataType }}</span>
            </td>
            <td>{{ metric.rightValue - metric.leftValue | zeroDifference | numberFormat : metric.dataType }}</td>
        </tr>
    </tbody>
</table>

为了帮助那些不了解 Angular 的人理解发生了什么,该表为 leftMetrics 数组中的每个值添加了一个正文行,并且在每行中将显示一个输入框(如果可编辑)或一个跨度如果只读或打印为 pdf。 “| numberFormat...” 是一个 Angular 过滤器,其作用是将值的显示更改为货币、小数、整数等。

如您所见,跨度内没有换行符,但无论出于何种原因,jsPDF 都添加了换行符。我尝试删除过滤器以确保它们不会添加中断,但这没有任何改变。我一直在查看该函数的源代码,但也看不到其中会添加中断的任何内容。有没有人以前见过这个问题,或者有任何线索告诉我接下来应该去哪里寻找这个问题的解决方案?

最佳答案

单步执行 jsPDF fromHTML 函数后,事实证明它正在正确执行其工作。出现问题的原因是上面的 span 标签向 jsPDF 中的表函数正在读取的单元格的 textContent 属性添加了空格。通过重新设计 ng-switch,我能够通过回退情况中的一些冗余来规避跨度的使用。

关于javascript - jsPDF向表格添加错误的空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25274997/

相关文章:

javascript - 使用 Angular 在 html 中打印 json 用户 ID

javascript - 单击事件不适用于动态添加的按钮

javascript - 索引数组的自然排序对象

html - 将 applet 放入 HTML,但是如何呢?

javascript - 在图像标签上添加覆盖时避免鼠标外出

angularjs - 绑定(bind)停止在 ng-if 中的输入中工作

php - 在 PHP 中,如何打印带 2 位小数的数字,但前提是已经有小数?

javascript foo.call(object) 与 object.foo()

html - 在样式链接图像的左侧垂直居中分隔线

javascript - 使用 angularjs 创建“阅读更多”按钮