将html转换为PDF时，未在iTextSharp中设置表格宽度 [英] table width not set in iTextSharp when converting html to PDF
问题描述
我正在尝试将html转换为pdf，但我遇到的问题是html表标签宽度未正确设置..
这是我的html
< table cellpadding ='4'cellspacing ='4'border ='0'width ='100％'style = '宽度：100％' >
< tr style ='background-color：＃000000'>
< td colspan ='2'align ='center'valign ='middle'width ='100％'>
< font face ='Calibri'size ='6'color ='＃FFFFFF'> Retail Natural Gas Deal Sheet< / font>
< / td>
< / tr>
< tr>
< td colspan ='2'width ='100％'>& nbsp;< / td>
< / tr>
< tr>
< td width ='90％'style ='width：90％'>
< table cellpadding ='0'cellspacing ='0'border ='0'width ='100％'>
< tr>
< td width ='42％'>
< font face ='Calibri'size ='4'>
< b>交易编号< / b>
< / font>
< / td>
< td width ='1％'>& nbsp;< / td>
< td width ='57％'>
< font face ='Calibri'size ='4'>
< b> 15RTLG7149< / b>
< / font>
< / td>
< / tr>
< tr>
< td colspan ='3'width ='100％'>& nbsp;< / td>
< / tr>
< tr>
< td width ='42％'>
< font face ='Calibri'size ='2'>
< b>交易日期< / b>
< / font>
< / td>
< td width ='1％'>& nbsp;< / td>
< td width ='57％'>
< font face ='Calibri'size ='2'> 2015年2月9日< / font>
< / td>
< / tr>
< tr>
< td width ='42％'>
< font face ='Calibri'size ='2'>
< b>价格日期< / b>
< / font>
< / td>
< td width ='1％'>& nbsp;< / td>
< td width ='57％'>
< font face ='Calibri'size ='2'> 2015年2月9日< / font>
< / td>
< / tr>
< tr>
< td width ='42％'>
< font face ='Calibri'size ='2'>
< b>授权日期< / b>
< / font>
< / td>
< td width ='1％'>& nbsp;< / td>
< td width ='57％'>
< font face ='Calibri'size ='2'> 2015年2月9日< / font>
< / td>
< / tr>
< tr>
< td colspan ='3'width ='100％'>& nbsp;< / td>
< / tr>
< / table>
< / td>
< td width = '10％'style ='width：10％'valign ='top'>
< table cellpadding ='0'cellspacing ='0'border ='0'width ='100％'>
< tr>
< td colspan ='2'align ='center'width ='100％'>
< font face ='Calibri'size ='2'>
< b>卷（MMMBtu）< / b>
< / font>
< / td>
< / tr>
< / table>
< / td>
< / tr>
< / table>
这是我用来生成pdf的c＃代码
文件pdfDoc = new Document（）;
//文件pdfDoc =新文件（PageSize.A4,10f，10f，10f，0f）;
// HTMLWorker htmlparser = new HTMLWorker（pdfDoc）;
using（MemoryStream memoryStream = new MemoryStream（））
{
PdfWriter writer = PdfWriter.GetInstance（pdfDoc，memoryStream）;
pdfDoc.Open（）;
XMLWorkerHelper.GetInstance（）。ParseXHtml（writer，pdfDoc，new StringReader（HTML））;
pdfDoc.Close（）;
byte [] bytes = memoryStream.ToArray（）;
memoryStream.Close（）;
返回字节;
}
但这就是它在pdf中呈现的方式..我无法找到合适的答案..我需要帮助..提前致谢..
您希望PDF看起来像这样：
如果您像这样简化HTML，这非常简单：
< table cellpadding =' 4'cellpacing ='4'border ='1'width ='100％'style ='width：100％'>
< tr style ='background-color：＃000000'>
< td colspan ='2'align ='center'valign ='middle'>
< font face ='Calibri'size ='6'color ='＃FFFFFF'> XXXX XXXXX XXXXX< / font>
< / td>
< / tr>
< tr>
< td colspan ='2'>& nbsp;< / td>
< / tr>
< tr>
< td width ='90％'style ='width：90％'>
< table cellpadding ='0'cellspacing ='0'border ='1'width ='100％'>
< tr>
< td width ='42％'>
< font face ='Calibri'size ='4'>
< b>交易编号< / b>
< / font>
< / td>
< td width ='1％'>& nbsp;< / td>
< td width ='57％'>
< font face ='Calibri'size ='4'>
< b> XXXXXXXXXX< / b>
< / font>
< / td>
< / tr>
< tr>
< td colspan ='3'width ='100％'>& nbsp;< / td>
< / tr>
< tr>
< td width ='42％'>
< font face ='Calibri'size ='2'>
< b>交易日期< / b>
< / font>
< / td>
< td width ='1％'>& nbsp;< / td>
< td width ='57％'>
< font face ='Calibri'size ='2'> 2015年2月9日< / font>
< / td>
< / tr>
< tr>
< td width ='42％'>
< font face ='Calibri'size ='2'>
< b>价格日期< / b>
< / font>
< / td>
< td width ='1％'>& nbsp;< / td>
< td width ='57％'>
< font face ='Calibri'size ='2'> 2015年2月9日< / font>
< / td>
< / tr>
< tr>
< td width ='42％'>
< font face ='Calibri'size ='2'>
< b>授权日期< / b>
< / font>
< / td>
< td width ='1％'>& nbsp;< / td>
< td width ='57％'>
< font face ='Calibri'size ='2'> 2015年2月9日< / font>
< / td>
< / tr>
< tr>
< td colspan ='3'width ='100％'>& nbsp;< / td>
< / tr>
< / table>
< / td>
< td width = '10％'style ='width：10％'valign ='top'>
< table cellpadding ='0'cellspacing ='0'border ='1'width ='100％'>
< tr>
< td colspan ='2'align ='center'width ='100％'>
< font face ='Calibri'size ='2'>
< b> Xxxxxxx（XXXXXXX）< / b>
< / font>
< / td>
< / tr>
< / table>
< / td>
< / tr>
< / table>
我做了什么改变？我在< td> 标记中删除了 width ='100％'，其中 colspan = '2'。这个信息含糊不清：你说两列一起应该占宽度的100％。但是：
- 您已在
< table>标记中对此进行了定义也有width ='100％'， - 如果一个单元格有colspan 2，你说这个单元格需要100％宽度，没有办法告诉每列的宽度。将
width ='100％'放在那里是没有意义的。
iTextSharp根据第一行定义列的宽度，它可以找到有关宽度的信息。在这种情况下，第一行宽度这样的信息是在具有2列的表中具有colspan 2的行。您将这两列的宽度定义为100％，并且iTextSharp将其解释为您想要说每列占宽度的50％（100％/ 2）。
如果删除这个不明确的信息，iText将根据第三行中定义的宽度（这是您所期望的）定义列的宽度。
I am trying to convert an html to pdf but the problem i face is that the html table tags width is not getting set correctly..
This is my html
<table cellpadding='4' cellspacing='4' border='0' width='100%' style='width:100%'>
<tr style='background-color:#000000'>
<td colspan='2' align='center' valign='middle' width='100%'>
<font face='Calibri' size='6' color='#FFFFFF'>Retail Natural Gas Deal Sheet</font>
</td>
</tr>
<tr>
<td colspan='2' width='100%'> </td>
</tr>
<tr>
<td width='90%' style='width:90%'>
<table cellpadding='0' cellspacing='0' border='0' width='100%'>
<tr>
<td width='42%'>
<font face='Calibri' size='4'>
<b>Deal Number</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='4'>
<b>15RTLG7149</b>
</font>
</td>
</tr>
<tr>
<td colspan='3' width='100%'> </td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Trade Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Price Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Authorize Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td colspan='3' width='100%'> </td>
</tr>
</table>
</td>
<td width='10%' style='width:10%' valign='top'>
<table cellpadding='0' cellspacing='0' border='0' width='100%'>
<tr>
<td colspan='2' align='center' width='100%'>
<font face='Calibri' size='2'>
<b>Volumes (MMMBtu)</b>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
this is the c# code i am using to generate the pdf
Document pdfDoc = new Document();
//Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 10f, 0f);
//HTMLWorker htmlparser = new HTMLWorker(pdfDoc);
using (MemoryStream memoryStream = new MemoryStream())
{
PdfWriter writer = PdfWriter.GetInstance(pdfDoc, memoryStream);
pdfDoc.Open();
XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, new StringReader(HTML));
pdfDoc.Close();
byte[] bytes = memoryStream.ToArray();
memoryStream.Close();
return bytes;
}
but this is how its rendered in the pdf.. I am not able to find the right answers.. I need help.. Thanks in advance..
http://i.stack.imgur.com/8WyBh.jpg
I have copy pasted your HTML to a text editor (Notepad++; marked 1 in the screen shot below). I have opened this HTML in a browser (Chrome; marked 2 in the screen shot below). I have converted the HTML to PDF (using XML Worker; the PDF is marked 3 in the screen shot below).
When I compare what I see in the browser with what I see in the PDF, I have the impression that iText's XML Worker is doing a great job. There isn't that much difference between what I see in the browser and what I see in the PDF.
However, when I look at your HTML, I see inconsistencies. Have you tried viewing your HTML in a browser? It doesn't look the way you expected, does it? Seems like the problem isn't caused by iText, but it's caused by the way you create your HTML. Please tell us if the HTML looks the way you expect in a browser. If not, please explain what you expect. Right now, it is hard to understand the problem as what I see in the PDF corresponds really well with what I see in a browser.
Update:
In your question, you didn't add any borders (border='0') and it was hard to see what you mean. I've now added borders, so that the HTML looks like this:
You want the PDF to look like this:
This is very easy if you simplify your HTML like this:
<table cellpadding='4' cellspacing='4' border='1' width='100%' style='width:100%'>
<tr style='background-color:#000000'>
<td colspan='2' align='center' valign='middle'>
<font face='Calibri' size='6' color='#FFFFFF'>XXXX XXXXX XXXXX</font>
</td>
</tr>
<tr>
<td colspan='2'> </td>
</tr>
<tr>
<td width='90%' style='width:90%'>
<table cellpadding='0' cellspacing='0' border='1' width='100%'>
<tr>
<td width='42%'>
<font face='Calibri' size='4'>
<b>Deal Number</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='4'>
<b>XXXXXXXXXX</b>
</font>
</td>
</tr>
<tr>
<td colspan='3' width='100%'> </td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Trade Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Price Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Authorize Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td colspan='3' width='100%'> </td>
</tr>
</table>
</td>
<td width='10%' style='width:10%' valign='top'>
<table cellpadding='0' cellspacing='0' border='1' width='100%'>
<tr>
<td colspan='2' align='center' width='100%'>
<font face='Calibri' size='2'>
<b>Xxxxxxx (XXXXXXX)</b>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
What did I change? I removed the width='100%' in the <td> tags where colspan='2'. This information is ambiguous: you are saying that the two columns together should take 100% of the width. However:
- You already defined this in the
<table>tag where you also havewidth='100%', and - If a cell has colspan 2 and you say that this cell should take 100% of the width, there is no way to tell the width of each column. It doesn't make sense to put
width='100%'there.
iTextSharp defines the width of the columns based on the first row where it can find information about the width. In this case, the first row width such information is a row with colspan 2 in a table with 2 columns. You define the width of these 2 columns combined as 100%, and iTextSharp interprets this as if you want to say that each column takes 50% (100% / 2) of the width.
If you remove this ambiguous information, iText will define the width of the columns based on the widths defined in the third row (which is what you expect).
这篇关于将html转换为PDF时，未在iTextSharp中设置表格宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
