在 pdf 的顶部添加一个 0 边距的图像，但是主体的 rest 具有左右边距/填充（Itext7，C#）
[英]Add an image at the top of the pdf with 0 margin, however the rest of the body has left and right margin/padding (Itext7, C#)
问题描述
I want to to create a pdf that contains a Bulletin logo/image with 0 margin at the top of the 1st page.
我想创建一个 pdf，其中包含第一页顶部的 0 边距的公告徽标/图像。 However I want whitespace/margin for the content in the body, that looks like this:但是我想要正文中内容的空白/边距，如下所示：
I am using IText7 with C# (.net 4.6.1) to try and achieve this.我正在使用 IText7 和 C# (.net 4.6.1) 来尝试实现这一目标。 I set the document margins to 0, then add the image and iterate through html (which comes from my WYSIWYG editor) break it down into elements and add each element to the document.我将文档边距设置为 0，然后添加图像并遍历 html（来自我的所见即所得编辑器）将其分解为元素并将每个元素添加到文档中。 However when I do this, it sets the margin of the content in the body as 0 as well.但是，当我这样做时，它也会将正文中内容的边距设置为 0。
Is there was a way to do this, where I can add a margin to each element that I add in the body?有没有办法做到这一点，我可以为我在正文中添加的每个元素添加边距？ Or any other method?还是有什么其他方法？ Thank you in advance.先感谢您。
Here is my code:这是我的代码：
string bulletinpdf = Server.MapPath("~/generatedfiles/pdf/text.pdf");
PdfWriter writer = new PdfWriter(bulletinpdf);
PdfDocument pdfDoc = new PdfDocument(writer);
pdfDoc.SetDefaultPageSize(PageSize.LETTER);
Document document2 = new Document(pdfDoc);
document2.SetMargins(0, 0, 0, 0); //set document margins to 0 here
string outputpdf = Server.MapPath("~/Components/Images/bulletinheader.jpg");
ImageData imageData = ImageDataFactory.Create(outputpdf);
Image image2 = new Image(imageData);
//image2.SetMargins(0, 0, 0, 0); //i've tried commenting out the above and trying this. to no avail.
document2.Add(image2);
ConverterProperties properties = new ConverterProperties();
IList elements = (IList)HtmlConverter.ConvertToElements(createForm.BulletinText, properties);
foreach (IElement element in elements)
{
document2.Add((IBlockElement) element);
}
document2.Close();
Here is the header image:这是 header 图像：
Here is the html for creatForm.BulletinText (html that gets extracted from the CK content editor) I've emptied the image element, but have attached the image below for replication purposes:这是 creatForm.BulletinText 的 html（从 CK 内容编辑器中提取的 html）我已经清空了图像元素，但出于复制目的附上了下面的图像：
<p><img alt="" src="" style="float:left; height:400px; width:400px">Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123 </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
<tbody>
<tr>
<td>This is a test</td>
<td>This is a test</td>
</tr>
<tr>
<td>This is a test</td>
<td>This is a test</td>
</tr>
<tr>
<td>This is a test</td>
<td>This is a test</td>
</tr>
</tbody>
</table>
Here is the image to place in html img element and modify src to include path to this picture:这是放置在 html img 元素中的图像，并修改 src 以包含此图片的路径：
1 个解决方案
解决方案1
1 2022-08-03 16:20:15
You can achieve the desired goal by adapting the HTML slightly, and all the code you have to write is a couple of lines:您可以通过稍微调整 HTML 来达到预期的目标，您必须编写的所有代码都是几行代码：
FileInfo htmlPath = new FileInfo("C:/Users/x/Desktop/html.html");
HtmlConverter.ConvertToPdf(new FileStream(htmlPath.FullName, FileMode.Open),
new FileStream("C:/Users/x/Desktop/out.pdf", FileMode.OpenOrCreate),
new ConverterProperties().SetBaseUri(htmlPath.Directory.FullName));
Now in your HTML you need to add the <img> which will contain the header, set an ID to it and set its with (matching the width of your PDF):现在在您的 HTML 中，您需要添加将包含 header 的<img> ，为其设置 ID 并将其设置为（与 PDF 的宽度匹配）：
<img id="header" style="width: 210mm" src="header.jpg"/>
Then we set all the right and left margins on the document to 0 (we will compensate it by setting margins to <body> element), and the top margin for the first page to 0. We mark the logo image as a running element and include it to the margin box area of the first page.然后我们将文档上的所有左右边距设置为 0（我们将通过将边距设置为<body>元素来补偿它），并将第一页的上边距设置为 0。我们将徽标图像标记为运行元素并将其包含在第一页的边距框区域。 All with the CSS declarative means!全部用 CSS 声明方式！
<style>
@page {
margin-left: 0;
margin-right: 0;
}
@page:first {
margin-top: 138pt;
@top-left {
content: element(header);
}
}
#header {
position: running(header);
}
</style>
Full HTML (I've placed the table on the next page just to verify the second page looks as expected as well):完整的 HTML（我将表格放在下一页只是为了验证第二页看起来也符合预期）：
<head>
<style>
@page {
margin-left: 0;
margin-right: 0;
}
@page:first {
margin-top: 138pt;
@top-left {
content: element(header);
}
}
#header {
position: running(header);
}
</style>
</head>
<body style="margin-left: 36pt; margin-right: 36pt;">
<img id="header" style="width: 210mm" src="header.jpg"/>
<p>Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123Testing 123 </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px; page-break-before: always;">
<tbody>
<tr>
<td>This is a test</td>
<td>This is a test</td>
</tr>
<tr>
<td>This is a test</td>
<td>This is a test</td>
</tr>
<tr>
<td>This is a test</td>
<td>This is a test</td>
</tr>
</tbody>
</table>
</body>
Visual result:视觉结果：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.