我在试着显示一个划过的表格格。
我试过几十种不同的方法。
我最好的解决方案是使用四个线性梯度,每个角落一个(因为不支持透明背景)。

这里的问题是,我必须指定表单元格的高度,因此,当同一行中任何其他单元格中的文本有比预期更多的行时,交叉不再是从一个角到另一个角。

我还尝试使用background-image,background-size设置为100% 100%。但是,pdfHtml不支持background-size。
我尝试过多种在Chrome中工作的解决方案,但没有一个在pdfHtml中工作。
有人知道(可能的)解决办法吗?
谢谢,
-祖祖泰--
发布于 2020-07-30 22:15:16
pdfHTML最终使用了iText的布局机制,这是相当灵活的。您可以通过自定义单元格的呈现逻辑并将该实现插入pdfHTML来实现您的最终目标。
首先,自定义单元格渲染器:
private static class CustomCellRenderer extends CellRenderer {
public CustomCellRenderer(Cell modelElement) {
super(modelElement);
}
@Override
public IRenderer getNextRenderer() {
return new CustomCellRenderer((Cell) modelElement);
}
@Override
public void drawBackground(DrawContext drawContext) {
super.drawBackground(drawContext);
PdfCanvas canvas = drawContext.getCanvas();
Rectangle area = getOccupiedAreaBBox();
canvas.moveTo(area.getLeft(), area.getTop()).lineTo(area.getRight(), area.getBottom());
canvas.moveTo(area.getLeft(), area.getBottom()).lineTo(area.getRight(), area.getTop());
canvas.stroke();
}
}本质上,我们重用了默认实现,并通过从左下角到右上角以及从左上角到右下角绘制一条线来扩展它。
现在,我们需要为在pdfHTML中创建的布局对象使用自定义呈现程序。它们是在标记工作器中创建的,因此为表单元格自定义标记工作人员:
private static class CustomTdTagWorker extends TdTagWorker {
public CustomTdTagWorker(IElementNode element,
ProcessorContext context) {
super(element, context);
}
@Override
public IPropertyContainer getElementResult() {
IPropertyContainer cell = super.getElementResult();
if (cell instanceof Cell) {
((Cell) cell).setNextRenderer(new CustomCellRenderer((Cell) cell));
}
return cell;
}
}缺少的部分是,我们需要配置pdfHTML以使用<td>单元格的自定义标记工作者,以及创建自定义标记工人工厂的方法:
private static class CustomTagWorkerFactory extends DefaultTagWorkerFactory {
@Override
public ITagWorker getCustomTagWorker(IElementNode tag, ProcessorContext context) {
if (TagConstants.TD.equals(tag.name())) {
return new CustomTdTagWorker(tag, context);
}
return super.getCustomTagWorker(tag, context);
}
}唯一缺失的部分是将自定义标记工人工厂传递给pdfHTML本身,这是通过转换器属性完成的:
HtmlConverter.convertToPdf(inFile, outFile, new ConverterProperties().setTagWorkerFactory(new CustomTagWorkerFactory()));以下HTML的代码:
<html>
<head>
<style>
td, th {
border: solid 1px;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Another cell 1</td>
<td>Another cell 2</td>
</tr>
</tbody>
<tfoot>
<td>
Footer 1
</td>
<td>
Footer 2
</td>
</tfoot>
</table>
</body>
</html>
在转换为PDF后,我得到了以下可视化结果:

发布于 2020-07-29 10:13:18
你试过用svg吗?在没有background-size属性的情况下也应该工作。
.diag {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /><path d='M0 99 L99 0 L100 1 L1 100' fill='black' /></svg>");
background-repeat: no-repeat;
background-position: center center;
border: 1px solid red;
}<div style="background-color: blue;">
<div class="diag" style="width: 300px; height: 100px;"></div>
</div>
https://stackoverflow.com/questions/63150893
复制相似问题