使用 XSL-FO 在网格中显示图像答案

【问题标题】：Displaying images in a grid with XSL-FO使用 XSL-FO 在网格中显示图像
【发布时间】：2015-03-25 14:23:14
【问题描述】：

<xsl:template match="PrintingImages">
<fo:block keep-together.within-page="always">
<fo:table table-layout="fixed" width="100%" border-collapse="separate" border-separation="2pt" column-width="50pt">
        <fo:table-body>
            <fo:table-row>
                <xsl:apply-templates/>
            </fo:table-row>
        </fo:table-body>
</fo:table>

<xsl:template match='PrintImagesData'>
   <fo:table-cell>
   <fo:block keep-together.within-page="always" float="left">
       <xsl:if test="Title">
           <fo:block><xsl:value-of select="Title" /></fo:block>
       </xsl:if>
       <xsl:if test="DateCreated">
           <fo:block><xsl:value-of select="DateCreated" /></fo:block>
       </xsl:if>
       <fo:block line-stacking-strategy="max-height">
           <xsl:element name="fo:external-graphic">
               <xsl:attribute name="width"><xsl:value-of select="Width"/></xsl:attribute>
               <xsl:attribute name="height"><xsl:value-of select="Height"/></xsl:attribute>
               <xsl:attribute name="content-width">scale-down-to-fit</xsl:attribute>
               <xsl:attribute name="content-height">scale-down-to-fit</xsl:attribute>
               <xsl:attribute name="scaling">uniform</xsl:attribute>
               <xsl:attribute name="src">url('<xsl:value-of select="ImgData"/>')</xsl:attribute>
           </xsl:element>
       </fo:block>
   </fo:block>

在后端我调用PrintImagesData 4 次，在PDF 中，它在同一行生成四个图像。我想要每行两个图像（例如两行，两列）。我该怎么做？

【问题讨论】：

您能否向我们提供输入 XML 以及您的 XSLT 的更多内容？看来你没有插入几个<fo:table-row>
如果您使用支持浮动的渲染器，请使用浮动。如果尺寸正确，它们将每行堆叠两个。不需要桌子。
在此处查看答案：stackoverflow.com/questions/24311352/…。这是下面答案的替代方法，您不需要为表格抛出行。

标签： xml xslt xsl-fo xmltype

【解决方案1】：

一种选择是在每个奇数位置的PrintImagesData 处创建一个新的fo:table-row，然后为该PrintImagesData 和第一个后续兄弟PrintImagesData 创建一个fo:table-cell。

这是一个基于原始问题中信息量有限的示例...

XML 输入

<doc>
    <PrintingImages>
        <PrintImagesData>
            <Title>Title 1</Title>
            <Width>100px</Width>
            <Height>100px</Height>
            <ImgData>some/graphic1.png</ImgData>
        </PrintImagesData>
        <PrintImagesData>
            <Title>Title 2</Title>
            <Width>100px</Width>
            <Height>100px</Height>
            <ImgData>some/graphic2.png</ImgData>
        </PrintImagesData>
        <PrintImagesData>
            <Title>Title 3</Title>
            <Width>100px</Width>
            <Height>100px</Height>
            <ImgData>some/graphic3.png</ImgData>
        </PrintImagesData>
        <PrintImagesData>
            <Title>Title 4</Title>
            <Width>100px</Width>
            <Height>100px</Height>
            <ImgData>some/graphic4.png</ImgData>
        </PrintImagesData>
    </PrintingImages>
</doc>

XSLT 1.0（对原来的 XSLT 进行了一些更改；主要是使用 AVT's。）

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <xsl:output indent="yes"/>
    <xsl:strip-space elements="*"/>

    <xsl:template match="/*">
        <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
            <fo:layout-master-set>
                <fo:simple-page-master master-name="my-page" page-width="8.5in" page-height="11in">
                    <fo:region-body margin="1in" margin-top="1.5in" margin-bottom="1.5in"/>
                </fo:simple-page-master>
            </fo:layout-master-set>
            <fo:page-sequence master-reference="my-page">
                <fo:flow flow-name="xsl-region-body"> 
                    <xsl:apply-templates/>
                </fo:flow>
            </fo:page-sequence>
        </fo:root>
    </xsl:template>

    <xsl:template match="PrintingImages">
        <fo:block keep-together.within-page="always">
            <fo:table table-layout="fixed" width="100%" border-collapse="separate" border-separation="2pt" column-width="50pt">
                <fo:table-body>
                    <xsl:apply-templates select="PrintImagesData[not(position() mod 2 = 0)]" mode="row"/>
                </fo:table-body>
            </fo:table>
        </fo:block>
    </xsl:template>

    <xsl:template match="PrintImagesData" mode="row">
        <xsl:variable name="nbr">
            <xsl:number/>
        </xsl:variable>
        <fo:table-row>
            <xsl:apply-templates select="."/>
            <xsl:if test="not($nbr mod 2 = 0)">
                <xsl:choose>
                    <xsl:when test="following-sibling::PrintImagesData">
                        <xsl:apply-templates select="following-sibling::PrintImagesData[1]"/>                        
                    </xsl:when>
                    <xsl:otherwise>
                        <fo:table-cell>
                            <fo:block/>
                        </fo:table-cell>
                    </xsl:otherwise>
                </xsl:choose>
            </xsl:if>
        </fo:table-row>
    </xsl:template>

    <xsl:template match="PrintImagesData">
        <fo:table-cell>
            <fo:block keep-together.within-page="always" float="left">
                <xsl:apply-templates select="Title|DateCreated"/>
                <fo:block line-stacking-strategy="max-height">
                    <fo:external-graphic 
                        width="{Width}" 
                        height="{Height}" 
                        content-width="scale-down-to-fit"
                        content-height="scale-down-to-fit" 
                        scaling="uniform" 
                        src="url('{ImgData}')"/>
                </fo:block>
            </fo:block>
        </fo:table-cell>
    </xsl:template>

    <xsl:template match="Title|DateCreated">
        <fo:block><xsl:value-of select="."/></fo:block>
    </xsl:template>
</xsl:stylesheet>

XSL-FO 输出

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
   <fo:layout-master-set>
      <fo:simple-page-master master-name="my-page" page-width="8.5in" page-height="11in">
         <fo:region-body margin="1in" margin-top="1.5in" margin-bottom="1.5in"/>
      </fo:simple-page-master>
   </fo:layout-master-set>
   <fo:page-sequence master-reference="my-page">
      <fo:flow flow-name="xsl-region-body">
         <fo:block keep-together.within-page="always">
            <fo:table table-layout="fixed" width="100%" border-collapse="separate" border-separation="2pt" column-width="50pt">
               <fo:table-body>
                  <fo:table-row>
                     <fo:table-cell>
                        <fo:block keep-together.within-page="always" float="left">
                           <fo:block>Title 1</fo:block>
                           <fo:block line-stacking-strategy="max-height">
                              <fo:external-graphic width="100px" height="100px" content-width="scale-down-to-fit" content-height="scale-down-to-fit" scaling="uniform" src="url('some/graphic1.png')"/>
                           </fo:block>
                        </fo:block>
                     </fo:table-cell>
                     <fo:table-cell>
                        <fo:block keep-together.within-page="always" float="left">
                           <fo:block>Title 2</fo:block>
                           <fo:block line-stacking-strategy="max-height">
                              <fo:external-graphic width="100px" height="100px" content-width="scale-down-to-fit" content-height="scale-down-to-fit" scaling="uniform" src="url('some/graphic2.png')"/>
                           </fo:block>
                        </fo:block>
                     </fo:table-cell>
                  </fo:table-row>
                  <fo:table-row>
                     <fo:table-cell>
                        <fo:block keep-together.within-page="always" float="left">
                           <fo:block>Title 3</fo:block>
                           <fo:block line-stacking-strategy="max-height">
                              <fo:external-graphic width="100px" height="100px" content-width="scale-down-to-fit" content-height="scale-down-to-fit" scaling="uniform" src="url('some/graphic3.png')"/>
                           </fo:block>
                        </fo:block>
                     </fo:table-cell>
                     <fo:table-cell>
                        <fo:block keep-together.within-page="always" float="left">
                           <fo:block>Title 4</fo:block>
                           <fo:block line-stacking-strategy="max-height">
                              <fo:external-graphic width="100px" height="100px" content-width="scale-down-to-fit" content-height="scale-down-to-fit" scaling="uniform" src="url('some/graphic4.png')"/>
                           </fo:block>
                        </fo:block>
                     </fo:table-cell>
                  </fo:table-row>
               </fo:table-body>
            </fo:table>
         </fo:block>
      </fo:flow>
   </fo:page-sequence>
</fo:root>

【讨论】：

感谢您的回复，但是，我使用循环来获取所有图像，因此图像可能超过 4 个。（也许 30 个）还有其他方法吗？
@HellGuoan - 你应该能够用循环做同样的事情。另外，我的答案应该处理超过 4 张图片。（我确实更新了它，所以如果有奇数个PrintImagesData，则会输出一个空单元格。）有没有理由不能将循环更改为xsl:apply-templates？您应该使用Minimal, Complete, and Verifiable example 更新您的问题。
心情无法表达，非常非常感谢！这真的很有帮助。感谢您的时间和耐心！
@HellGuoan - 如果这个答案足够，请考虑accepting it by clicking on the checkmark next to it。谢谢！