New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rotated elements not rendered on thead on second page and beyond #1914

Closed
Viburnum opened this Issue Aug 18, 2014 · 19 comments

Comments

Projects
None yet
@Viburnum

Viburnum commented Aug 18, 2014

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?

  • Debian Wheezy 64bit
  • Windows 7 64bit
@JayEn84

This comment has been minimized.

JayEn84 commented Oct 24, 2014

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 -webkit-transform or position: relative; or position: absolute on an element inside the table's head. This is probably independent from the OS, and repeating table headers were not available before 0.12.1 anyway, right?

@ashkulz ashkulz added the PatchNeeded label Oct 25, 2014

@ashkulz ashkulz added this to the future milestone Oct 25, 2014

@ashkulz

This comment has been minimized.

Member

ashkulz commented Oct 25, 2014

I think that the webkit patch wkhtmltopdf/qt@9df9710 does not handle those scenarios properly.

@FirstNameKevin

This comment has been minimized.

FirstNameKevin commented Nov 12, 2014

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?

@rruchte

This comment has been minimized.

rruchte commented Jan 31, 2016

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

@j0n4s

This comment has been minimized.

j0n4s commented Jul 6, 2016

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..

@Wjat777

This comment has been minimized.

Wjat777 commented Nov 23, 2016

This issue occurs with 0.12.4 version too. The rccuchte patch's is not merged.

@ashkulz ashkulz added HasPatch and removed PatchNeeded labels Nov 23, 2016

@ashkulz

This comment has been minimized.

Member

ashkulz commented Nov 23, 2016

Sorry, didn't see his patch. Will review and see if it can be merged.

@emielmolenaar

This comment has been minimized.

emielmolenaar commented Jan 2, 2017

It would be very nice if this issue gets fixed. Hoping that the submitted patch is OK.

@chourie2

This comment has been minimized.

chourie2 commented Feb 3, 2017

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!

@ashkulz ashkulz closed this in b3ca2e3 Mar 22, 2017

@ashkulz ashkulz added Fixed and removed HasPatch labels Mar 22, 2017

@ashkulz

This comment has been minimized.

Member

ashkulz commented Mar 22, 2017

I've applied the patch by @rruchte as-is, sorry for the delay. Thanks for the contribution!

@DarshanKsheerasagar

This comment has been minimized.

DarshanKsheerasagar commented Apr 6, 2017

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 :

pagebreakissue

@ashkulz

This comment has been minimized.

Member

ashkulz commented May 30, 2018

A release candidate is available which includes the fixes made in wkhtmltopdf/qt@c745cfd -- please test and report your findings before the final release.

@ashkulz ashkulz modified the milestones: future, 0.12.5 May 30, 2018

@craue

This comment has been minimized.

craue commented Jun 7, 2018

Unfortunately, I can't see any difference in the results rendered with 0.12.4 and 0.12.5-rc (wkhtmltox-0.12.5-0.20180604.140.rc~6f77c46~msvc2015-win64.exe). Rotated text in thead is still missing on following pages.

@ashkulz

This comment has been minimized.

Member

ashkulz commented Jun 7, 2018

@craue: the patch by @rruchte was not a full fledged solution, maybe you can share the exact scenario in which it is failing?

@rruchte

This comment has been minimized.

rruchte commented Jun 7, 2018

@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>
@craue

This comment has been minimized.

craue commented Jun 7, 2018

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 overflow: hidden) made it disappear completely.

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:
test-page1

result page 2:
test-page2

@rruchte

This comment has been minimized.

rruchte commented Jun 7, 2018

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.

@craue

This comment has been minimized.

craue commented Jun 7, 2018

@rruchte, shouldn't it be in the same place? Seems like the position calculation is flawed.

@rruchte

This comment has been minimized.

rruchte commented Jun 7, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment