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

Choose a Different Style Sheet #11

Closed rherring closed 8 years ago

rherring commented 9 years ago

Is it possible to choose a different style sheet to style the PDF?

I've tried using:

return xepOnline.Formatter.Format('printPage',{render:'download', pageMediaResource: 'styles/print.css'});

but it doesn't seem to be working. It's still using the CSS used on the screen.

kstubs commented 9 years ago

pageMediaResource property is not supported. It was stubbed out early on when we were setting this up. However, different style for PDF is fully supported; use @media print {} in your CSS. CSS rules in here will override your standard CSS rules. See our demo:

http://cloudformatter.com/CSS2Pdf.Demos.PrintMedia

rherring commented 9 years ago

That doesn't seem to be working for me either. I even tried using the same "Print Media" stylesheet that is on the demo page. When I actually print the page, the stylesheet works fine, but when I save to PDF using the jquery plugin, it doesn't do anything that it's supposed to do.

If it helps, I'm using Firefox and the all the files live on my computer, I'm not hosting them anywhere yet.

kbrown01 commented 9 years ago

Here's a fiddle, can you adopt to show us what is not working in your case? This one works, tested in Firefox and Chrome. http://jsfiddle.net/4k9dyrq3/6/

rherring commented 9 years ago

I created a super generic version of what I'm working on (since I'm under contract and am unable to display the actual work I'm creating) and posted it into the fiddle. After going back and forth with it, I've found out that when I include the styles directly into the HTML, it follows the styles of the 

@media print {}
. If I were to link to the styles, then it bypasses the 
@media print {}
.

Is this the expected result? Am I supposed to be putting all of my style into the HTML, or should linking to them still work?

http://jsfiddle.net/fishgraphics/4k9dyrq3/8/

kbrown01 commented 9 years ago

So I see your fiddle, but I am unclear what the issue is still. It does not matter if the styles are in the HTML or loaded via a link. I updated this simple Fiddle: http://jsfiddle.net/4k9dyrq3/9/

As you can see, the media-styles.css is loaded from an external stylesheet now and not internaal and yet it is the same. What should I be looking for in this example you sent that is not working?