我有一个使用两列的简单 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 无法跨页面进行多列布局。有没有办法做到这一点?