c# - HTML : how do I avoid table tag when using display: table; 中的 iText 7 可访问 PDF

Question

我正在开发一个将 View 转换为 PDF 的 ASP.NET MVC 元素。以前使用的是 Rotavia，但后来新的客户要求是 PDF 可访问/符合 508。出于布局目的，以前的开发人员将整个标题部分( Logo 、标题、免责声明等)作为没有元素(只是 td)的表格。我需要将它们转换为 div 但保持外观不变。因此，我所做的是将它们制作成 div，然后在适当的地方使用 CSS 属性 display: table、display: table-row-group、display: table-row 和 display: table-cell。它最终看起来几乎完全一样。

问题是，即使它们现在是 div，也像这样使用 iText DefaultTagWorkerFactory:

ConverterProperties props = new ConverterProperties();
FontProvider fp = new FontProvider();
fp.AddStandardPdfFonts();
props.SetFontProvider(fp);
var tagWorkerFactory = new DefaultTagWorkerFactory();
props.SetTagWorkerFactory(tagWorkerFactory);
HtmlConverter.ConvertToPdf(html, pdfDoc, props);

它仍然将 Div 标签转换为 table、tr 和 td 标签。显然，在 div 上使用 display:table 的全部目的是为了避免使用表格但获得相同的布局效果。

为什么 iText 会实现这种行为，有什么解决办法吗？如果没有，任何人都可以提供 display: table、display: table-row-group、display: table-row 和 display: table-cell 的任何精确 CSS 等价物，因为 iText 似乎只看到属性“display: table”并使用表格标签。我在一个自定义标签工作工厂中尝试了以下操作，该工厂通过向我的 div 添加一个类“make-div”来继承 DefaultTagWorkerFactory，如下所示:

public class AccessibilityTagWorkerFactory : DefaultTagWorkerFactory
    {
        public override ITagWorker GetCustomTagWorker(IElementNode tag, ProcessorContext context)
        {
            var attributes = tag.GetAttributes();
            var cssClass = attributes.GetAttribute("class");
            if (!string.IsNullOrWhiteSpace(cssClass) && cssClass.Contains("make-div"))
            {
                return new DivTagWorker(tag, context);
            }
            return null;
        }
    }

但是，它会抛出类似“无法将 DivTagWorker 隐式转换为 DisplayTableRowTagWorker”的异常。

我对这一切束手无策。任何帮助，将不胜感激。谢谢。

Answer 1

您似乎已经用标记工作器替换了 display: table-row 元素，但没有为 display: table 替换。当然，我不能肯定地说，因为您没有共享示例 HTML 文件来重现该问题。

无论如何，替代标签 worker 的方法在这里并不是最好的。它只会放弃由自定义 display CSS 属性引起的布局调整，而您的目标是保存布局但只是更改标记。

要保存布局并更改标记，您不应更改创建的标记工作器，而应为创建为的 Table 和 Cell 布局元素设置正确的 Angular 色这些标签 worker 的结果。

相应的重载标记工作器可能如下所示:

private static class DivRoleDisplayTableTagWorker extends DisplayTableTagWorker {
    public DivRoleDisplayTableTagWorker(IElementNode element, ProcessorContext context) {
        super(element, context);
    }

    @Override
    public void processEnd(IElementNode element, ProcessorContext context) {
        super.processEnd(element, context);
        if (getElementResult() instanceof Table) {
            Table table = (Table) getElementResult();
            table.getAccessibilityProperties().setRole(StandardRoles.DIV);
            for (int i = 0; i < table.getNumberOfRows(); i++) {
                for (int j = 0; j < table.getNumberOfColumns(); j++) {
                    Cell cell = table.getCell(i, j);
                    if (cell != null) {
                        cell.getAccessibilityProperties().setRole(StandardRoles.DIV);
                    }
                }
            }
        }
    }
}

您需要做的就是用自定义标记工作器将 div 替换为 display: table。根据您的文档，您可能会使用不同的条件，但对于一个简单的案例，自定义标签工作工厂将如下所示:

ITagWorkerFactory customFactory = new DefaultTagWorkerFactory() {
    @Override
    public ITagWorker getCustomTagWorker(IElementNode tag, ProcessorContext context) {
        if (CssConstants.TABLE.equals(tag.getStyles().get(CssConstants.DISPLAY)) && TagConstants.DIV.equals(tag.name())) {
            return new DivRoleDisplayTableTagWorker(tag, context);
        }
        return super.getCustomTagWorker(tag, context);
    }
};

现在您的表格及其单元格将被标记为 div。