如何垂直填充table？

Question

这是我刚才发布的的后续问题。

我有以下 xsl 样式表：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format" exclude-result-prefixes="fo">
  <xsl:template match="barcode-list">
    <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
      <fo:layout-master-set>
        <fo:simple-page-master master-name="simpleA4" page-height="29.7cm" page-width="21cm" margin-top="2cm" margin-bottom="2cm" margin-left="2cm" margin-right="2cm">
          <fo:region-body/>
        </fo:simple-page-master>
      </fo:layout-master-set>
      <fo:page-sequence master-reference="simpleA4">
        <fo:flow flow-name="xsl-region-body">
          <fo:block font-size="14pt">
          <fo:table table-layout="fixed" width="100%" border-collapse="separate" border-separation="3pt">    
            <fo:table-column column-width="50%"/>
            <fo:table-column column-width="50%"/>
            <fo:table-body>
              <xsl:apply-templates select="item"/>
            </fo:table-body>
          </fo:table>
          </fo:block>
        </fo:flow>
      </fo:page-sequence>
     </fo:root>
  </xsl:template>
  <xsl:template match="item">
    <fo:table-cell text-align="center">
      <xsl:if test="position() mod 2 = 1">
        <xsl:attribute name="starts-row">true</xsl:attribute>
      </xsl:if>
      <fo:block>
        <fo:external-graphic height="scale-to-fit" width="100%" content-height="scale-to-fit" content-width="scale-to-fit">
          <xsl:attribute name="src">url('<xsl:value-of select="image"/>')</xsl:attribute>
        </fo:external-graphic>
      </fo:block>
      <fo:block>
        <fo:external-graphic height="scale-to-fit" width="100%" content-height="scale-to-fit" content-width="scale-to-fit">
          <xsl:attribute name="src">url('<xsl:value-of select="barcode"/>')</xsl:attribute>
        </fo:external-graphic>
      </fo:block>
      <fo:block wrap-option="wrap">
        <xsl:value-of select="name"/>
      </fo:block>
    </fo:table-cell> 
  </xsl:template>
</xsl:stylesheet>

效果很好，因为它用我的数据填充了两列 table。

这里填table "horizontally"，就像左边的table。

我重新评估了我的要求并意识到我希望它像右边的 table 一样被填充 "vertically":

 ---------------     -----------------
|   1   |   2   |   |   1   | (n/2)+1 |
|   3   |   4   |   |   2   | (n/2)+2 | 
|  ...  |  ...  |   |  ...  |   ...   |
|  n-1  |   n   |   |  n/2  |    n    |
 ---------------     -----------------

理想情况下，我想移动到页面末尾的下一栏并在下一页的第一栏重新开始，但我认为这是不可能的。

这是我的例子 xml:

<barcode-list>
   <item>
      <name>the-barcode</name>
      <barcode>file:///d:/pdf/barcode.png</barcode>
      <image>file:///d:/test.png</image>
      <format>CODE_128</format>
   </item>
   ...
</barcode-list>

我发现 this 留言板条目似乎提出了解决方案，但我无法理解它的作用。

任何人都可以指导我如何开始吗？

Answer 1

使用双栏文档布局，您的内容块（带有两个图像和一个标签）将在页面中向下流动，然后到下一栏。这将在后续页面上继续。以下是示例 FO 和结果。需要注意的几点：

通过向区域主体添加列数来实现两列
每个包含您重复内容的容器都在一个块容器中，其中 keep-together.within-column 设置为 "always" 以确保您的两个图像和一个标签都在一起而不是分开跨栏或跨页。
我确实更改了您的图形规格，因为 width/height

示例 FO 代码（请注意，我在这里只显示了前几个块，我给它们编号以显示顺序）：

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
    <fo:simple-page-master master-name="simpleA4" page-height="29.7cm" page-width="21cm" margin-top="2cm" margin-bottom="2cm" margin-left="2cm" margin-right="2cm">
        <fo:region-body column-count="2"/>
    </fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="simpleA4">
    <fo:flow flow-name="xsl-region-body">
        <fo:block-container font-size="14pt"  text-align="center" keep-together.within-column="always">
            <fo:block>
                <fo:external-graphic src="url('box.jpg')" height="100%" width="100%" content-height="scale-to-fit" content-width="scale-to-fit"/>                   
            </fo:block>
            <fo:block>
                <fo:external-graphic src="url('brick.jpg')" height="100%" width="100%" content-height="scale-to-fit" content-width="scale-to-fit"/>
            </fo:block>
            <fo:block wrap-option="wrap">
                Object Name 1
            </fo:block>
        </fo:block-container>

        <fo:block-container font-size="14pt"  text-align="center" keep-together.within-column="always">
            <fo:block>
                <fo:external-graphic src="url('box.jpg')" height="100%" width="100%" content-height="scale-to-fit" content-width="scale-to-fit"/>                   
            </fo:block>
            <fo:block>
                <fo:external-graphic src="url('brick.jpg')" height="100%" width="100%" content-height="scale-to-fit" content-width="scale-to-fit"/>
            </fo:block>
            <fo:block wrap-option="wrap">
                Object Name 2
            </fo:block>
        </fo:block-container>

9 个块的示例输出：

如何垂直填充table？

How to fill table vertically?

java

xml

pdf

xsl-fo

apache-fop