search

Xportability / css-to-pdf

Convert any HTML page or region to PDF - supports CSS, SVG, embedded XML objects, and more..
http://www.cloudformatter.com/CSS2Pdf
206 stars 78 forks source link

Another @media print problem #29

Closed ghost closed 8 years ago

ghost commented 8 years ago

Hey, so far i really like your project :) But within the final stage of implementing css2pdf I am unable to figure out how to style my generated pdf. I have a table, which I dynamically fill with rows and columns. IDs are assigned with JS, referring to a css file.

<table id="classTable"></table>

I use @media print to change the table properties (black text color, white background ...). When I call window.print() I get a nice version of the table to save as pdf. But when I use css2pdf the @media print stylings are ignored!

return xepOnline.Formatter.Format('classTable',{render:'download',pageWidth:'279mm', pageHeight:'216mm'});

Thanks in advance for your help, Lolanger

kbrown01 commented 8 years ago

It is hard to diagnose without a simple example, can you set up a fiddle for us in our template?

I http://jsfiddle.net/zvx6eb7e/ did this, hit the PDF button and you see green cells not red cells.

http://jsfiddle.net/zvx6eb7e/186/

Kevin Brown

Xportability

From: Lolanger [mailto:notifications@github.com] Sent: Tuesday, July 05, 2016 10:56 AM To: Xportability/css-to-pdf css-to-pdf@noreply.github.com Subject: [Xportability/css-to-pdf] Another @media print problem (#29)

Hey, so far i really like your project :) But within the final stage of implementing css2pdf I am unable to figure out how to style my generated pdf. I have a table, which I dynamically fill with rows and columns. IDs are assigned with JS, referring to a css file.

I use @media https://github.com/media print to change the table properties (black text color, white background ...). When I call window.print() I get a nice version of the table to save as pdf. But when I use css2pdf the @media https://github.com/media print stylings are ignored!

return xepOnline.Formatter.Format('classTable',{render:'download',pageWidth:'279mm', pageHeight:'216mm'});

Thanks in advance for your help, Lolanger

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Xportability/css-to-pdf/issues/29 , or mute the thread https://github.com/notifications/unsubscribe/AAsJo01c5cjmtr59y8vnUMDOQZBCKDg2ks5qSpqSgaJpZM4JFXj- . https://github.com/notifications/beacon/AAsJowA-dLIQE9GB6oMfvoK5a-1Bwi9fks5qSpqSgaJpZM4JFXj-.gif

ghost commented 8 years ago

Hey, thanks for the fast answer. I´m not sure if a fiddle is really useful. I will try to explain without fiddle if its not clear then I will create one. I basically have a table within my HTML file

<table id="classTable"></table>

I fill it with a lot of this:

var tr = document.createElement('TR');
var td = document.createElement('TD');
    td.innerHTML = "1. Somi";
    td.setAttribute("class", "classTableTDNote")
    tr.appendChild(td);

I have two different versions of the classTableTDNote

style.css

#classTable{
  margin:10px;
  color:#D6D6D6;
  text-align:center;
  font-size: 14px;
  font-size: 1rem;
  border-collapse: collapse;
}

.classTableTDNote{
  width:40px;
}

stylePrint.css

@media print{
#classTable{
  margin:10px;
   color:#000000;
  text-align:center;
  font-size: 10px;
  font-size: 0.8rem;
  border-collapse: collapse;
}
}

Then i call a function which returns

return xepOnline.Formatter.Format('classTable',{render:'download',pageWidth:'279mm', pageHeight:'216mm'});

But the textcolor is still color:#D6D6D6; and not color:#000000;

kbrown01 commented 8 years ago

Well the way that @cloudformatter works is that it creates a copy of the target to print, applies all @media rules, then scrapes the HTML and sends to a server to be formatted.

One thing to test for me … can you just surround the table itself with a

with an id (like id=’tablediv’) and then send that
to print and not only the table.

There could be an issue that the software expects a div that is the print container and the @media rules may not be applied to the overall print container.

If this does not work, then the only way I can debug is to walk the code and see why stylePrint.css is not being applied so I would need a fiddle to do this or a link to the site if it is open.

Kevin Brown

Xportability

From: Lolanger [mailto:notifications@github.com] Sent: Tuesday, July 05, 2016 11:23 AM To: Xportability/css-to-pdf css-to-pdf@noreply.github.com Cc: kbrown01 kevin.brown@xportability.com; Comment comment@noreply.github.com Subject: Re: [Xportability/css-to-pdf] Another @media print problem (#29)

Hey, thanks for the fast answer. I´m not sure if a fiddle is really useful. I will try to explain without fiddle if its not clear then I will create one. I basically have a table within my HTML file

I fill it with a lot of this:

var tr = document.createElement('TR'); var td = document.createElement('TD'); td.innerHTML = "1. Somi"; td.setAttribute("class", "classTableTDNote") tr.appendChild(td);

I have two different versions of the classTableTDNote

style.css

classTable{

margin:10px; color:#D6D6D6; text-align:center; font-size: 14px; font-size: 1rem; border-collapse: collapse; }

.classTableTDNote{ width:40px; }

stylePrint.css

@media print{

classTable{

margin:10px; color:#000000; text-align:center; font-size: 10px; font-size: 0.8rem; border-collapse: collapse; } }

Then i call a funtcion which returns

return xepOnline.Formatter.Format('classTable',{render:'download',pageWidth:'279mm', pageHeight:'216mm'});

But the textcolor is still color:#D6D6D6; and not color:#000000;

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Xportability/css-to-pdf/issues/29#issuecomment-230560366 , or mute the thread https://github.com/notifications/unsubscribe/AAsJo9gkJ_tfRvhsYvv52E4SHhLTOkPxks5qSqDtgaJpZM4JFXj- . https://github.com/notifications/beacon/AAsJo0HzkbxbNKlGshXgrKKvFqHXoJGYks5qSqDtgaJpZM4JFXj-.gif

ghost commented 8 years ago

Hey, I just created a fiddle and it works without problems. If I try the exact same code offline its not working...

ghost commented 8 years ago

"Offline" seems to be the problem. I probably missed some server-side functionality?

kbrown01 commented 8 years ago

What do you mean by “offline”. Do you mean on localhost?

From: Lolanger [mailto:notifications@github.com] Sent: Tuesday, July 05, 2016 11:52 AM To: Xportability/css-to-pdf css-to-pdf@noreply.github.com Cc: kbrown01 kevin.brown@xportability.com; Comment comment@noreply.github.com Subject: Re: [Xportability/css-to-pdf] Another @media print problem (#29)

Hey, I just created a fiddle and it works without problems. If I try the exact same code offline its not working...

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Xportability/css-to-pdf/issues/29#issuecomment-230568619 , or mute the thread https://github.com/notifications/unsubscribe/AAsJo-OI6tiQf6UVg1w1aMTjutHqxwaBks5qSqfngaJpZM4JFXj- . https://github.com/notifications/beacon/AAsJozE-j-Ab38K-wGl7WAaQsM8mNBi_ks5qSqfngaJpZM4JFXj-.gif

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.