Rotated elements not rendered on thead on second page and beyond #1914
Comments
|
I experience the very same problem here, and I already found out that table headers will not be repeated as soon as you either use |
|
I think that the webkit patch wkhtmltopdf/qt@9df9710 does not handle those scenarios properly. |
|
Same issue here using transform in the thead causes those rotated items to only show on the first page. All non-rotated items show properly between pages though. Are there any workarounds or fixes for this yet? |
|
Here is a patch that correctly renders rotated headers inside the repeated table heads. This covers the basic scenario where you have block level elements with a transform applied directly inside the cells. It's kind of ugly but it works consistently for my needs. I'm not a WebKit guru, so there may be a cleaner way to do this |
|
excuse me, What does it mean "PatchNeed"?, I have install wkhtmltopdf 0.12.3 (with patched qt) and I have the rotate in second page problem.. |
|
This issue occurs with 0.12.4 version too. The rccuchte patch's is not merged. |
|
Sorry, didn't see his patch. Will review and see if it can be merged. |
|
It would be very nice if this issue gets fixed. Hoping that the submitted patch is OK. |
|
Same for me here, I'm struggling with this issue too. It would really help me, just to have an update on the situation. Have you found the time to do the review? Or is it planed to work on it, or not anymore? Thank you in advance for your time! |
|
I've applied the patch by @rruchte as-is, sorry for the delay. Thanks for the contribution! |
|
Hello @ashkulz , Generate PDF using HTMl string with page break is not proper working ... Below is my Code and Output Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="wkhtmltopdfTest._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="PrintStyle.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Download" OnClick="btnExport_Click" />
<div >
<asp:Panel ID="pnlPerson" runat="server">
<div>
<table style="width: 785px;">
<tr>
<td>
First Page
</td>
</tr>
<tr class="page-break">
<td >
</td>
</tr>
<tr>
<td>
Second Page
</td>
</tr>
<tr class="page-break">
<td >
</td>
</tr>
<tr>
<td>
Third Page
</td>
</tr>
<tr class="page-break">
<td >
</td>
</tr>
<tr>
<td>
Fourth Page
</td>
</tr>
<tr class="page-break">
<td >
</td>
</tr>
<tr>
<td>
Five Page
</td>
</tr>
</table>
</div>
</asp:Panel>
</div>
</form>
</body>
</html>Default.cs.aspx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Diagnostics;
using System.IO;
using System.Text;
using System.Text.RegularExpressions;
namespace wkhtmltopdfTest
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnExport_Click(object sender, EventArgs e)
{
try
{
string PrintStyle = System.IO.File.ReadAllText(Server.MapPath("/PrintStyle.css"));
StringWriter sw = new StringWriter();
HtmlTextWriter hw = new HtmlTextWriter(sw);
pnlPerson.RenderControl(hw);
StringReader sr = new StringReader(sw.ToString());
string outXml = "<html> <head> " +
"<style type=\"text/css\"> " + PrintStyle + " </style> " +
"</head> <body> <div>" + sw.ToString() + " " +
" </div></body> </html>";
//table, tr, td, th, tbody, thead, tfoot { page-break-inside: avoid !important;}
//tr{display:block;}
byte[] result = ConvertHtmlToPdf(outXml);
HttpContext.Current.Response.Clear();
Response.ContentType = "application/pdf";
string outputFilename = "Report" + "_" + DateTime.Now.ToString("yyyy-MM-dd-hh-mm-ss-fff") + ".pdf";
Response.AddHeader("content-disposition", "attachment;filename=" + outputFilename);
Response.CacheControl = "No-cache";
MemoryStream ms = new MemoryStream(result);
ms.WriteTo(Response.OutputStream);
Response.Flush();
Response.SuppressContent = true;
HttpContext.Current.ApplicationInstance.CompleteRequest();
}
catch(Exception ex)
{
}
}
protected byte[] ConvertHtmlToPdf(string html)
{
System.Reflection.Assembly ass = System.Reflection.Assembly.GetExecutingAssembly();
string conPath = System.IO.Path.GetDirectoryName(ass.CodeBase);
Uri uri = new Uri(conPath);
conPath = uri.AbsolutePath.Replace("%20", " ").Replace("25", "");
conPath = Path.GetFullPath(Path.Combine(conPath, @"..\"));
conPath = conPath + "bin\\wkhtmltopdf.exe";
var p = new Process
{
StartInfo =
{
CreateNoWindow = true,
RedirectStandardOutput = true,
RedirectStandardError = true,
RedirectStandardInput = true,
UseShellExecute = false,
FileName = conPath
}
};
string s = "-q ";
s += "--margin-bottom 0 ";
s += "--margin-right 0 ";
s += "--margin-left 0 ";
s += "--margin-top 0 ";
s += "--page-size A4 ";
s += "--print-media-type ";
s += "--disable-smart-shrinking ";
s += "- -";
p.StartInfo.Arguments = s;
p.Start();
StreamWriter myStreamWriter = new StreamWriter(p.StandardInput.BaseStream, Encoding.UTF8);
myStreamWriter.Write(html);
myStreamWriter.Close();
var buffer = new byte[32768];
byte[] file;
using (var ms = new MemoryStream())
{
while (true)
{
var read = p.StandardOutput.BaseStream.Read(buffer, 0, buffer.Length);
if (read <= 0)
{
break;
}
ms.Write(buffer, 0, read);
}
file = ms.ToArray();
}
p.WaitForExit(60000);
var returnCode = p.ExitCode;
p.Close();
return returnCode == 0 ? file : null;
}
}
}PrintStyle.css @media print
{
tr.page-break {display: block;page-break-after: always; }
}Output :
|
|
A release candidate is available which includes the fixes made in wkhtmltopdf/qt@c745cfd -- please test and report your findings before the final release. |
|
Unfortunately, I can't see any difference in the results rendered with 0.12.4 and 0.12.5-rc ( |
|
@craue The patch covers cases like the following, where there is a rotated block inside the table head cell. <table>
<thead>
<tr>
<th style="font-size: 12px; height: 75px; vertical-align: bottom; width: 24px; white-space: nowrap; padding: 4px;overflow: hidden;">
<div style="transform: rotate(270deg);width: 24px;padding-left: 6px;">Rotated Text</div>
</th>
</tr>
</thead>
</table> |
|
I tried narrowing down the cause and found out that the header text is placed differently on following pages which in conjunction with other CSS (especially code: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
table {
border: 1px solid #aaa;
border-collapse: collapse;
}
th {
height: 100px;
background: #0ccccc;
}
th div {
-webkit-transform: rotate(270deg);
}
tbody tr {
text-align: center;
vertical-align: top;
height: 1000px;
background: #cccc0c;
}
</style>
</head>
<body>
<table>
<thead>
<tr><th><div>head cell</div></th></tr>
</thead>
<tbody>
<tr><td>body cell</td></tr>
<tr><td>body cell</td></tr>
</tbody>
</table>
</body>
</html>result page 1: result page 2: |
|
You may need to experiment with your CSS. I created the patch for a case where tables are repeating across many pages and it works as expected for us. |
|
@rruchte, shouldn't it be in the same place? Seems like the position calculation is flawed. |
|
@craue It is in the same place for my case. There is certainly room for improvement - I just hacked it up to get rotated headers working in a client project. |
|
Still actual. |
What steps will reproduce the problem?
Create a table with THEAD header and TBODY long enough to require more pages
Create inside the TH of the the header a DIV with some content and add the css property:
-webkit-transform: rotate(270deg);What is the expected output?
To have each page repeat the THEAD with the rotated element.
What do you see instead?
Rotated elements are removed from page 2 and beyond.
What version are you using?
Using:
On what operating system?
The text was updated successfully, but these errors were encountered: