failed to generate correct PDF while having some customized font inside the css file
yorzi opened this issue · 4 comments
In my project, designer sets some customized font in CSS file, then I found the regarding font/text were gone in PDF after doing that. I think it's caused by the CSS settings, how can I fix it? Thanks!
And I am wondering what are the main differences between wicked_pdf and wise_pdf? If someone can help, I appreciate it very much!
Excuse me for some delay in answer.
Can you please send me you HTML and CSS files. I will try to fix your issue.
Speaking about differences, wisepdf supports wkhtmltopdf-0.10, also it is written to work with Rails 3.1 and above, it is well tested. And the main: I am working now on painless generation of you PDF not only in controllers, but in DJ or Resque workers, for example.
Thanks for your answers!
My HTML and CSS and JS are a bit complex, I can show you a piece of code specifically:
CSS: (bentonsansbold is a font which is stored in /vendor/assets/fonts folder)
ul.button-tabs li.current a {
font-family: bentonsansbold;
color: black;
background-position: center bottom;
}
HTML:
<li class='current first' id='overview'>
<a href="/countries/argentina">Overview</a>
<span class='arrow-border'></span>
<span class='arrow'></span>
</li>
In generated PDF, the Overview part is blank!
Did you tried to use X11 version of wkhtmltopdf? I think that in non X11 only web forms are supported.
Hey I have a similar problem please see my HTML, it either freezes or it renders it w/o styles/fonts:
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=Helvetica+Neue:100,300,400,600,700" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
body {
font-family: 'Helvetica Neue', sans-serif;
color: #777;
}
body {
width: 80%;
margin: 15px auto;
}
body > header {
width: 500px;
margin: 0 auto;
text-align: center;
}
.vcard p {
margin: 0;
}
section > header label{
padding: 0 20px 0 0;
}
.table th, .table td {
font-weight: normal;
border-top: none;
padding: 20px;
}
#Summary {
width: 300px;
}
hr:last-child {
margin: 0;
padding-bottom: 20px;
}
</style>
</head>
<body>
<header>
<img src="logo.jpeg">
<h1>Name of Store</h1>
<div class="vcard">
<p class="adr">
<span class="street-address">Neue Schönhauser Straße 13, 10178 Berlin</span><br>
<p class="tel">+44 (0)XXXX XXXXXX</p>
<p class="fax">+44 (0)XXXX XXXXXX</p>
<a class="url" href="www.store.com"><span class="website">www.store.com</span></a><br>
<span class="email">store@store.com</span><br>
<span class="VAT">DE 814 946 377</span>
</p>
</div>
</header>
<section>
<hr>
<header>
<label class="pull-left">Invoice Number: <span>11</span></label><label class="pull-left">Date: <span>20 July, 1969</span></label>
</header>
<br>
<br>
<table class="table">
<thead>
<tr>
<th>Amt.</th>
<th>SKU</th>
<th>Name</th>
<th>Single Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>APPL11MBWT43</td>
<td>Moon Boots Edition 11</td>
<td>249.00 €</td>
<td>249.00 €</td>
</tr>
<tr>
<td>2</td>
<td>APPL11MBWT43</td>
<td>Moon Boots Edition 11</td>
<td>249.00 €</td>
<td>498.00 €</td>
</tr>
<tr>
<td>3</td>
<td>APPL11MBWT43</td>
<td>Moon Boots Edition 11</td>
<td>249.00 €</td>
<td>747.00 €</td>
</tr>
</tbody>
</table>
<hr>
<div id="Summary" class="pull-right">
<div class="clearfix">
<label class="pull-left">Net Amount: </label><span class="pull-right">21,005.04 €</span>
</div>
<div class="clearfix">
<label class="pull-left">VAT 19.00%: </label><span class="pull-right">3,990.96 €</span>
</div>
<div class="clearfix">
<label class="pull-left">VAT 7.00%: </label><span class="pull-right">00.00 €</span>
</div>
<br>
<div class="clearfix">
<label class="pull-left">Total: </label><span class="pull-right">24,996.00 €</span>
</div>
<hr>
</div>
</section>
</body>
</html>