0

我有一个使用两列的简单 HTML 布局。示例标记(仅在 Chrome 中正确显示,可在http://jsfiddle.net/MJzZE/查看):

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            *
            {
                margin: 0px;
                padding: 0px;
            }

            html
            {
                font-family: 'Open Sans';
                width: 8.5in;
                margin: 0px auto;
                background-color: #eee;
            }

            body
            {
                padding: 25px;
                background-color: #fff;
            }

            h1
            {
                color: red;
                border-top: solid 22px red;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 38px;

            }

            h2
            {
                color: red;
                border-top: solid 6px red;
                font-size: 21px;
                text-transform: uppercase;
                font-weight: bold;
            }

            h2:first-child
            {
                font-size: 25px;
            }

            p
            {
                margin-bottom: 20px;
                font-size: 13px;
                line-height: 21px;
            }

            .content
            {
                -webkit-column-count: 2;
                column-count: 2;
                -webkit-column-gap: 30px;
                column-gap: 30px;
                clear: both;
            }

            .image
            {
                background-color: #444; 
                text-align: center;
                color: #fff;
                text-transform: uppercase;
                font-size: 30px;
            }

            .logo.image
            {
                float: right; 
                width: 300px; 
                height: 105px; 
                line-height: 105px;
                margin-top: -40px; 
                margin-bottom: 20px;
            }

            .inline.image
            {
                height: 300px; 
                line-height: 300px;
                display: inline-block; 
                width: 100%;
                margin-bottom: 20px;
            }

        </style>

    </head>

    <body>

        <h1>Title</h1>

        <div class="logo image">Logo</div>

        <div class="content">

            <h2>Introduction & Context</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
                non dui neque. Aliquam tortor libero, accumsan quis viverra
                egestas, consectetur at augue. Pellentesque metus erat,
                tincidunt aliquam tincidunt et, dapibus eget nisl. Vivamus sit
                amet ultricies arcu. In hac habitasse platea dictumst. Pellentesque
                non porta leo. non bibendum nisi. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Ut non dui neque.
                Aliquam tortor libero, accumsan quis viverra egestas, consectetur
                at augue. Pellentesque metus erat, tincidunt aliquam
                tincidunt et, dapibus eget nisl. Vivamus sit amet ultricies arcu.
                In hac habitasse platea dictumst. Pellentesque non porta leo.
                non bibendum nisi.
            </p>

            <p>
                Pellentesque non porta leo. non bibendum nis, consectetur
                adipiscing elit. Ut non dui neque. Aliquam tortor libero, accumsan
                quis viverra egestas, consectetur at augue. Pellentesque
                metus erat, tincidunt aliquam tincidunt et, dapibus
                eget nisl. Vivamus sit amet ultricies arcu. In hac habitasse
                platea dictumst. Pellentesque non porta leo. non bibendum
                nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Ut non dui neque. Aliquam tortor libero, accumsan quis viverra
                egestas, consectetur at augue. Pellentesque metus erat,
                tincidunt aliquam tincidunt et, dapibus eget nisl. Vivamus sit
                amet ultricies arcu. In hac habitasse platea dictumst.
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
                non dui neque. Aliquam tortor libero, accumsan quis viverra
                egestas, consectetur at augue. Pellentesque metus erat,
                tincidunt aliquam tincidunt et, dapibus eget nisl. Vivamus sit
                amet ultricies arcu. In hac habitasse platea dictumst. Pellentesque
                non porta leo. non bibendum nisi. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Ut non dui neque.
                Aliquam tortor libero, accumsan quis viverra egestas, consectetur
                at augue. Pellentesque metus erat, tincidunt aliquam
                tincidunt et, dapibus eget nisl. Vivamus sit amet ultricies arcu.
                In hac habitasse platea dictumst. Pellentesque non porta leo.
                non bibendum nisi.
            </p>

            <h2>The Problem</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non
                dui neque. Aliquam tortor libero, accumsan quis viverra egestas,
                consectetur at augue. Nullam a risus non tellus ultrices placerat ut
                ultrices lectus. Nam gravida venenatis ipsum eu malesuada. Fusce
                lobortis odio id mi eleifend consequat sit amet id felis. Pellentesque
                tempor pharetra odio quis interdum. Curabitur eleifend dolor at turpis
                lobortis porta. Nullam a risus non tellus ultrices placerat ut ultrices
                lectus. Nam gravida venenatis ipsum eu malesuada. Etiam quis
                aliquam lacus. In libero neque, fermentum quis laoreet in, fringilla vel
                ipsum. Donec ut augue quis neque aliquet venenatis vitae et dui.
            </p>

            <img class="inline image" />

            <p>
                Pellentesque tempor pharetra odio quis interdum. Curabitur eleifend
                dolor at turpis lobortis porta. Nullam a risus non tellus ultrices placerat
                ut ultrices lectus. Nam gravida venenatis ipsum eu malesuada.
                Etiam quis aliquam lacus. In libero neque, fermentum quis laoreet
                in, fringilla vel ipsum. Donec ut augue quis neque aliquet venenatis
                vitae et dui. Fusce lobortis odio id mi eleifend consequat sit amet id
                felis. Proin pharetra semper tincidunt. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Ut non dui neque. Aliquam tortor libero,
                accumsan quis viverra egestas, consectetur at augue.
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non
                dui neque. Aliquam tortor libero, accumsan quis viverra egestas,
                consectetur at augue. Nullam a risus non tellus ultrices placerat ut
                ultrices lectus. Nam gravida venenatis ipsum eu malesuada. Fusce
                lobortis odio id mi eleifend consequat sit amet id felis. Pellentesque
                tempor pharetra odio quis interdum. Curabitur eleifend dolor at turpis
                lobortis porta. Nullam a risus non tellus ultrices placerat ut ultrices
                lectus. Nam gravida venenatis ipsum eu malesuada. Etiam quis
                aliquam lacus. In libero neque, fermentum quis laoreet in, fringilla vel
                ipsum. Donec ut augue quis neque aliquet venenatis vitae et dui.
            </p>

            <p>
                Pellentesque tempor pharetra odio quis interdum. Curabitur eleifend
                dolor at turpis lobortis porta. Nullam a risus non tellus ultrices placerat
                ut ultrices lectus. Nam gravida venenatis ipsum eu malesuada.
                Etiam quis aliquam lacus. In libero neque, fermentum quis laoreet
                in, fringilla vel ipsum. Donec ut augue quis neque aliquet venenatis
                vitae et dui. Fusce lobortis odio id mi eleifend consequat sit amet id
                felis. Proin pharetra semper tincidunt. Lorem ipsum dolor sit amet.
            </p>

            <h2>Solution Selected</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non
                dui neque. Aliquam tortor libero, accumsan quis viverra egestas,
                consectetur at augue. Nullam a risus non tellus ultrices placerat ut
                ultrices lectus. Nam gravida venenatis ipsum eu malesuada. Fusce
                lobortis odio id mi eleifend consequat sit amet id felis. Pellentesque
                tempor pharetra odio quis interdum. Curabitur eleifend dolor at turpis
                lobortis porta. Nullam a risus non tellus ultrices placerat ut ultrices
                lectus. Nam gravida venenatis ipsum eu malesuada. Etiam quis
                aliquam lacus. In libero neque, fermentum quis laoreet in, fringilla vel
                ipsum. Donec ut augue quis neque aliquet venenatis vitae et dui.
            </p>

            <img class="inline image" />

            <p>
                Pellentesque tempor pharetra odio quis interdum. Curabitur eleifend
                dolor at turpis lobortis porta. Nullam a risus non tellus ultrices placerat
                ut ultrices lectus. Nam gravida venenatis ipsum eu malesuada.
                Etiam quis aliquam lacus. In libero neque, fermentum quis laoreet
                in, fringilla vel ipsum. Donec ut augue quis neque aliquet venenatis
                vitae et dui. Fusce lobortis odio id mi eleifend consequat sit amet id
                felis. Proin pharetra semper tincidunt. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Ut non dui neque. Aliquam tortor libero,
                accumsan quis viverra egestas, consectetur at augue.
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non
                dui neque. Aliquam tortor libero, accumsan quis viverra egestas,
                consectetur at augue. Nullam a risus non tellus ultrices placerat ut
                ultrices lectus. Nam gravida venenatis ipsum eu malesuada. Fusce
                lobortis odio id mi eleifend consequat sit amet id felis. Pellentesque
                tempor pharetra odio quis interdum. Curabitur eleifend dolor at turpis
                lobortis porta. Nullam a risus non tellus ultrices placerat ut ultrices
                lectus. Nam gravida venenatis ipsum eu malesuada. Etiam quis
                aliquam lacus. In libero neque, fermentum quis laoreet in, fringilla vel
                ipsum. Donec ut augue quis neque aliquet venenatis vitae et dui.
            </p>

            <p>
                Pellentesque tempor pharetra odio quis interdum. Curabitur eleifend
                dolor at turpis lobortis porta. Nullam a risus non tellus ultrices placerat
                ut ultrices lectus. Nam gravida venenatis ipsum eu malesuada.
                Etiam quis aliquam lacus. In libero neque, fermentum quis laoreet
                in, fringilla vel ipsum. Donec ut augue quis neque aliquet venenatis
                vitae et dui. Fusce lobortis odio id mi eleifend consequat sit amet id
                felis. Proin pharetra semper tincidunt. Lorem ipsum dolor sit amet.
            </p>

            <h2>Desired Outcome</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
                non dui neque. Aliquam tortor libero, accumsan quis viverra
                egestas, consectetur at augue. Pellentesque metus erat,
                tincidunt aliquam tincidunt et, dapibus eget nisl. Vivamus sit
                amet ultricies arcu. In hac habitasse platea dictumst. Pellentesque
                non porta leo. non bibendum nisi. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Ut non dui neque.
                Aliquam tortor libero, accumsan quis viverra egestas, consectetur
                at augue. Pellentesque metus erat, tincidunt aliquam
                tincidunt et, dapibus eget nisl. Vivamus sit amet ultricies arcu.
                In hac habitasse platea dictumst. Pellentesque non porta leo.
                non bibendum nisi.
            </p>

            <p>
                Pellentesque non porta leo. non bibendum nis, consectetur
                adipiscing elit. Ut non dui neque. Aliquam tortor libero, accumsan
                quis viverra egestas, consectetur at augue. Pellentesque
                metus erat, tincidunt aliquam tincidunt et, dapibus
                eget nisl. Vivamus sit amet ultricies arcu. In hac habitasse
                platea dictumst. Pellentesque non porta leo. non bibendum
                nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Ut non dui neque. Aliquam tortor libero, accumsan quis viverra
                egestas, consectetur at augue. Pellentesque metus erat,
                tincidunt aliquam tincidunt et, dapibus eget nisl. Vivamus sit
                amet ultricies arcu. In hac habitasse platea dictumst.
            </p>

        </div>

    </body>

</html>

我需要在 C# Web 应用程序的服务器上将此 HTML 转换为 PDF。目前我正在尝试使用 Essential Objects PDF 组件,但我愿意考虑任何能够满足我需求的 .NET API。

此布局将代表 5 - 7 页的报告,因此必须有分页符。

直观地说,用户希望内容首先填充第 1 页的两列,然后是第 2 页的两列,依此类推。因此,第 2 页的第 1 列应该从第 1 页的第 2 列溢出开始。

但是 EO PDF 似乎只是制作了两个非常高的列(就像浏览器一样),然后在页面边界处对它们进行切片。效果是第 1 列的内容延伸到第 2 页,然后再回到第 1 页的第 2 列。

列的内容是用户提供的标记,因此在运行时会有所不同,不容易拆分,而且我不知道它最终会在页面上多大——所以我不知道我在哪里会放置手动分页符。

如果碰巧跨越页面边界,EO PDF 还会将诸如图像之类的元素一分为二。

两种效果都可以在http://screencast.com/t/ojIPeamht看到

这些问题似乎使 EO 无法跨页面进行多列布局。有没有办法做到这一点?

4

1 回答 1

0

根据与 Essential Objects 支持的官方通信,实际上并不支持跨多个页面的 HTML 列,因为它们不能很好地指定。

相反,我能够使用 HtmlToPdf.Options.ColumnCount 和 HtmlToPdf.Options.ColumnGapWidth 选项以及多个绘图通道来完成工作。

于 2012-12-10T16:44:12.223 回答