问题标签 [jspdf-autotable]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
741 浏览

javascript - 在 IE 中使用表格创建 pdf 的问题

目前,我正在使用 jspdf 最新版本和 jspdf-AutoTable 2.1.0最新版本来创建具有非常复杂表格的 PDF。

它在 Chrome 和 FireFox 中就像一个魅力(大惊喜!)但在 IE10 中,它渲染 pdf 非常糟糕(另一个大惊喜!)

这是 chrome 上 pdf 中最广泛的表格之一的输出(当前为空)

在 Chrome 上生成的 PDF

这是IE10渲染的pdf

在此处输入图像描述

如您所见,它没有按应有的方式包装列标题,也没有扩展和显示第一列单元格并裁剪其中的文本。

为了保持我的自定义表格样式及其内容正确的样式,我调整并创建了自己的GetTableJSON方法,因此我可以检索和存储每个单独的单元格样式并稍后将其应用到createdHeaderCellandcreatedCell钩子上

这是用于使用自定义样式创建此 pdf 的完整代码

编辑:

根据要求,这是表格 HTML 和tableCellStyles变量的 JSON

https://jsfiddle.net/6ewqnwty/

由于表格的大小以及 HTML 和 JSON 的字符数量,我将它们设置在单独的小提琴中。

编辑2:

我刚刚使小提琴可运行,能够重现该问题。

https://jsfiddle.net/6ewqnwty/1/

并不完美,因为我在我的应用程序中拥有它,我能够使用样式检索 pdf,只缺少列标题文本,但至少在 IE 上下载 pdf 时的问题仍然存在

0 投票
1 回答
6616 浏览

javascript - JsPDF Autotable: How do I display two tables side by side that span multiple pages?

I'm trying to use Autotable to display information for two tables side by side. When I don't have that many entries and the information only needs one page, it displays fine. However, when I have a lot of data and multiple pages, the second table doesn't start displaying until the first table has displayed most of its entries.

Here's a JsFiddle with sample data to illustrate the problem. I tried changing the y-position of the second table, but it just seems to move the data up on the page it's displaying and cuts off the top of the data rather than moving it onto the previous pages.

0 投票
2 回答
849 浏览

jspdf - jsPDF-AutoTable 分层和 z-index

我已经实现了一个表格的 PDF 导出,该表格在第一列中有图像。我使用createdCell回调来确定单元格的 (x,y) 坐标,然后用于doc.addImage()在适当的位置渲染图像。

我遇到的问题是,如果我将图像渲染到正确的坐标,它们实际上位于渲染表的后面。如果我将 x 坐标向左移动,我可以看到图像被渲染到文档中。

有谁知道是否有一种方法可以指定呈现为 PDF 的对象的图层索引,类似于 z-index 属性在 CSS 中的工作方式?

或者是否可以更改渲染顺序以便在顶部渲染图像?

0 投票
1 回答
1015 浏览

javascript - pdf创建时的行跨度问题

因此,我最近刚刚根据客户的要求在我的 pdf 创建中添加了对行跨度的支持。但它没有按预期工作。

按照示例中的代码,我添加了行跨度,它可以正常工作......在最后一列。与前几款相比没有那么多。

正如你在这个小提琴上看到的那样。

关于它如何工作的一点解释......或者我打算让它工作。

创建表的 json 时,我将单元格生成的行数存储在值中,用 * 分隔数量和值

在渲染 pdf 时drawCell,我会检查该值是否包含 *,所以我知道它是一个生成行的单元格,所以我split对值执行 a 并获取它跨越的行数和应该出现的值,创建具有正确大小和位置的表格单元格

有任何想法吗???

编辑

我只是稍微调整了一下小提琴,我得到了一个可观的结果

以前,我在单元格生成行的行尾丢失了单元格

生成的行上缺少单元格

因此,我没有忽略由于行生成而隐藏的那些单元格,而是将它们的raw值设置为空字符串

现在,我得到了完整的网格

完整的网格

但是,又一次,pdf 在我生成的单元格中间呈现行线。看起来更好,但仍然不是预期的结果。这是更新的小提琴,也针对黑白着色进行了调整,并使用了最新版本的 jspdf-AutoTable

我已经将单元格边框宽度设置为 0,但由于某种原因,调整后的宽度是行尾的单元格

在此处输入图像描述

0 投票
4 回答
5566 浏览

jspdf - 如何使特定行加粗?

我正在生成一个 pdf,到目前为止一切正常,但我希望一些特定的行是粗体的。例如,请参见图片:来自 jspdf-autotable 的网格模板 我如何制作例如 id =1 和 id=3 粗体的行?在我的代码下面。

0 投票
0 回答
209 浏览

jspdf - 不能将行放在表头上方

我做了一个自定义行,想把它放在表格标题上方。在此处输入图像描述我怎样才能做到这一点?查看自定义行,我从示例中得到了这个,有人可以帮我吗?这是我的代码:

0 投票
1 回答
3987 浏览

pdf-generation - 如何制作多表头

我正在尝试制作一个合并了 2 个标题的表格。目前,我制作了 2 个带有 2 个单独标题的单独表格,看起来还不错,但是当表格宽度扩大时,第一个表格标题不会扩大。我如何合并 2 个表头,或者我可以用 2 个表头制作 1 个表。请看图片(目前的表格有 2 个表头) 目前的自动表

这是我的代码:

0 投票
2 回答
4329 浏览

javascript - jsPDF自动右对齐x位置错误

我的示例(只需单击“导出 PDF”):https ://jsfiddle.net/j9vaqpnz/7/

我的示例导出我的表,如下所示:

在此处输入图像描述 .

然后使用库jspdfautotable将表导出为 pdf 。

在导出函数期间,我使用“drawCell”函数,对于所有包含数字的列,我将它们右对齐,如下所示:

.

问题:在 PDF 中,我右对齐的所有列都定位不正确,它看起来像这样:

在此处输入图像描述

这是一个错误吗?或者我可能不正确地使用“drawCell”?

0 投票
1 回答
1131 浏览

jspdf - jsPDF-AutoTable:图像不匹配行换页

感谢 jsPDF AutoTable v2.3.0 对以下内容的帮助。

我在第一列有一个带有以下样式的图像的表格:

当表格占据两页时,图像不能正确地适合该行。

示例:https ://jsfiddle.net/shinseiki86/60qrh6e1/

结果:https ://i.stack.imgur.com/PykQw.png

谢谢!

0 投票
0 回答
2500 浏览

jspdf - jspfd-autotable:如何为同一列中的单元格添加不同的颜色

我正在尝试根据某个值更改特定单元格的颜色。更具体地说,单元格应显示为红色、橙色或绿色。如果表格只包含一行,我可以通过更改整个列的颜色来做到这一点,如下所示:

不幸的是,我使用的大多数表格都包含不止一行,因此通常情况下,同一列中的两个单元格必须具有不同的颜色。如何更改一个特定单元格的颜色?在 jspdf-autotable 插件的文档中,我经常阅读有关单元挂钩的信息,尽管我不知道如何使用它...