Partage

Probleme d'application du CSS

real_path et pdf

9 août 2018 à 9:48:51

Bonjour,

Je cherche à génerer un pdf à partir d'un fichier html (j'ai un peu galérér mais maitenant mon pdf est bien généré). J'utilise html2pdf, seulement mon CSS n'est plus appliqué (alors qu'il l'est sur la page de base)

J'ai essayer d'utiliser la fonction realpath de php mais la non plus rien ne s'applique au pdf, et meme rien au fichier de base...

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="pdf.css">

</head>

Quand je fais un var_dump du realpath j'ai bien le bon chemin pourtant

J'ai essayer de metttre le style dans une balise style et plus dans un link au début, certaines choses s'applique mais pas tout...

Merci à vous

-
Edité par QuentinVidal5 9 août 2018 à 10:41:42

Le plus souvent la cause du bug est situé devant l'écran ;)

Zoki_Marciano

9 août 2018 à 11:08:23

Pdf.css se trouve bien à la racine du dossier qui contient ta page? ou la racine du site si ta page html y est aussi?

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

QuentinVidal5

9 août 2018 à 11:15:06

il sont bien dans le meme dossier au meme niveau

lorsque je configure le head de mon fichier pdf.php comma ça

<head>
	<title>Test</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="pdf.css">

</head>

Le css est bien appliqué a la page pdf.php mais ensuite quand je le genere en pdf avec mon fichier index.php

<?php

ob_start();
require 'pdf.php';
$content=ob_get_clean();

/*
$pdf="C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf http://localhost/Cave/Test/PDF/ c:\wamp64\www\Cave\Test\test48.pdf"
*/

/*
use mikehaertl\wkhtmlto\Pdf;

$pdf=new \mikehaertl\wkhtmlto\Pdf($content);



$pdf->saveAS('oheo.pdf');
$pdf->send();
$pdf->send('oheo.pdf'); */
/*require('html2pdf/src/Html2Pdf.php');
try{
	$pdf= new HTML2PDF('P','A4','fr');
	$pdf->writeHTML($content);
	$pdf->output('test49.pdf');
}catch(HTMLPDF_exception $e){
	die($e);
}
*/

require __DIR__.'/vendor/autoload.php';

use Spipu\Html2Pdf\Html2Pdf;

$html2pdf = new Html2Pdf();
$html2pdf->writeHTML($content);
$html2pdf->pdf->SetDisplayMode('fullpage');
try{
	$html2pdf->output('test49.pdf');
}catch(HTMLPDF_exception $e){
	die($e);
}
?>

Le css ne s'applique pas sur le pdf.

Si je configure mon fichier pdf.php avec ce head

<head>
	<title>Test</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="<?= realpath('pdf.css');?>">

</head>

La plus de style, même pour la page pdf.php

Le plus souvent la cause du bug est situé devant l'écran ;)

philodick

9 août 2018 à 11:18:58

Bonjour,

Ton css doit être dans la page, pas dans un fichier css externe.

N'oubliez pas d'activer les erreurs PDO.

QuentinVidal5

9 août 2018 à 11:43:25

philodick a écrit:

Bonjour,

Ton css doit être dans la page, pas dans un fichier css externe.

j'ai déja essayer, une partie de mon code css est prise en compte, mais une autre partie est ignoré, nottament tout ce qui concerne les tableaux

Je l'ai ajouter comme ça, en un seul coup

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<meta charset="utf-8">
	

</head>
<body>
	<style type="text/css">
		body{
	color:#222;
	font-family: "Helvetica Nueu", Arial, Verdana, sans-serif;
}

h1{
	font-size: 3em;
	font-weight: bold;
	margin: 0 0 70px 0;
}

.adress_label, .infos_label{
	color: #555;
	float: left;
	width: 105px;
	text-align: right;
}


.adress_content, .infos_content{
	margin-left: 115px;
	border-left: 1px solid #CCCCCC;
	padding-left: 10px;
}

.adress-from{
	float: left;
	width: 50%;

}

.infos{
	float: right;
	width: 50%;
}

.adress-to{
	position: absolute;
	top: 7px;
	right: 0;
	width: 50%;

}

.cd{ clear:both; }

.items{
	margin: 50px 0;
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.items tbody tr:nth-child(odd){
	background-color: #f6f6f6
}

.items th{
	text-align: left;
	
	
	padding: 10px 3px;
	font-size: 0.9em;
}


.items td{
	padding: 10px;
	border-top: 1px solid #CCCCCC;
}

.total{
	background-color: transparent !important;
}

.total td{
	border:none!important;
}

.total-first td{
	padding top: 28px;
}
.total_label{
	text-align: right;
	background-color: transparent;
}

.total-big td {
	font-size: 1.3em;
	padding-top: 10px;
	font-weight: bold;
}


.footer{
	position: absolute;
	bottom: 0px;
	margin-bottom: 10px;
	width: 98%;
	left: 1%;
	text-align: center;
	border-top: 1px #CCCCCC;
	

}
	</style>
	<?= realpath('pdf.css');?>
	<h1>Facture</h1>
	<div class="adress-from">
		<div class="adress_label">De</div>
		<div class="adress_content">
			S.A.S Vignerons de Montfrin <br />
			42 rue quelque chose<br/>
			30XYZ Montfrin
		</div>
	</div>

	<div class="adress-to">
		<div class="adress_label">Pour</div>
		<div class="adress_content">
			S.A.S Vignerons de Montfrin <br />
			42 rue quelque chose<br/>
			30XYZ Montfrin
		</div>
	</div>

	<div class="infos">
		<div class="infos_label">Facture n°</div>
		<div class="infos_content">25</div>
		<div class="infos_label">émise le</div>
		<div class="infos_content">25/12/98</div>


	</div>

	<div class="cb"></div>

	<table class="items">

		<thead>
			<tr>
				<th>description</th>
				<th>Prix HT</th>
				<th>Prix TTC</th>
			</tr>
		</thead>
		

		<tbody>
			<?php for($i=0; $i<4; $i++): ?>
			<tr>
				<td>Oracle bouteilles</td>
				<td style="width: 78px"> 4.00 €</td>
				<td style="width: 108px">4.80 €</td>
			</tr>
			<?php endfor ?>

			<tr class="total total-first" >
				<td colspan="2" class="total_label">Total HT</td>
				<td><strong>40,00 €</strong></td>
				
			</tr>

			<tr class="total" >
				<td colspan="2" class="total_label">Taxe (20.00%)</td>
				<td> <strong>08,00 €</strong></td>
				
			</tr>
			<tr class="total total-big" >
				<td colspan="2" class="total_label">Total TTC</td>
				<td><strong>48,00 €</strong> </td>
				
			</tr>
		</tbody>
		
	</table>

	<div class="footer">
		SAS VIGNERONS DE MONTFRIN, route de la gare 30490 Montfrin, Tel/Fax: 04 66 57 53 63</div>

</body>
</html>

Est ce qu'il faudrait l'ajouter petit à petit ? ( c'est à dire dans <div style="width: 50%">) Dans ce cas, il y a t'il un moyen de fair en sorte que les lignes pairs et impair soit de couleur différentes?

Le plus souvent la cause du bug est situé devant l'écran ;)

philodick

9 août 2018 à 11:49:00

Je ne suis pas un spécialiste de HtmlToPDF, mais en général il ne faut pas trop en demander à ce type de bibliothèque. Je ne suis pas sûr que ça prenne en compte les classes et tout ça. Je pense qu'il faut indiquer le style dans chaque élément.

A ce moment là, il faudrait même gérer les différences de style entre les lignes pairs et impaires en php.

N'oubliez pas d'activer les erreurs PDO.

QuentinVidal5

9 août 2018 à 12:00:27

Oui j'y ai pensé apres je vais utiliser une boucle php pour l'affichage des produit, donc unj simple compteur et un petit test me pemettra de modifier la couleur de fond ou d'autre parametres.

J'ai testé de le faire en wkhtmltopdf, qui m'a l'ai bien plus simple d'utilisation, le pdf généré est tres bien, comme je le veux, mais j'arrive pas à le générer à partir du php... plus de détails sur ce probleme ici-> https://openclassrooms.com/forum/sujet/generation-du-pdf-avec-wkhtmltopdf-en-php

Merci à vous je vais commencer à réecrire le css dans les balises pour voir ce que ça me donne

Ce qui est bizarre c'est que je gere tout par des class sur cette page, et certians éléments on bien leur css, certians pas du tout...

-
Edité par QuentinVidal5 9 août 2018 à 12:00:50

Le plus souvent la cause du bug est situé devant l'écran ;)

philodick

9 août 2018 à 12:32:58

QuentinVidal5 a écrit:

Ce qui est bizarre c'est que je gere tout par des class sur cette page, et certians éléments on bien leur css, certians pas du tout...

-
Edité par QuentinVidal5 il y a 26 minutes

Ca paraît bizarre mais c'est inhérent à la bibliothèque elle-même : elle ne prend pas tous les cas en compte.

Personnellement j'utilise DomPDF, mais c'est le même problème, il faut tâtonner pour voir ce qui marche ou pas.

Particulièrement dans les tableaux, la gestion des bordures et tout ça, surtout quand tu as des éléments imbriqués. Mettre le CSS directement dans les éléments te permet d'adapter plus finement. Mais c'est vrai que c'est un peu fastidieux.

N'oubliez pas d'activer les erreurs PDO.

QuentinVidal5

9 août 2018 à 13:33:55

C'est la ou wkhtmltopdf me semblait avoir un petit avantage (apres j'ai fais qu'une page, donc j'en ai pas vu les limites non plus)

Le plus souvent la cause du bug est situé devant l'écran ;)

Mewen_bzh

9 août 2018 à 14:28:09

Salut,

Au passage tu as une erreur dans ton ton CSS :

.total-first td{
    padding top: 28px;
}

Il manque un "-" entre "padding" et "top". Est-ce une erreur suffisante pour que cela bloque tout le reste de tes styles ? A toi de nous le dire...

Je ne réponds pas aux messages privés.

QuentinVidal5

9 août 2018 à 15:39:05

Hum effectivement merci

mais tout ne viens pas de la malheuresement

J'ai mis tout le css dans les éléments, et la pupart s'applique mais pas tout encore notamment (tout va bien sur le .php , mais en générant le pdf ça foire...)

j'ai plus que ce probleme, la bordure noir autour, sachant que sans background color, le fond est noir....

<tbody>
			<?php for($i=0; $i<4; $i++): ?>
			<tr style="background-color: #f6f6f6;">
				<td style="width: 64%;padding: 10px;
	border-top: 1px solid #CCCCCC;">Oracle bouteilles</td>
				<td style="width: 18%; padding: 10px;
	border-top: 1px solid #CCCCCC;"> 4.00 €</td>
				<td style="width: 18%; padding: 10px;
	border-top: 1px solid #CCCCCC;">4.80 €</td>
			</tr>
			<?php endfor ?>

			<tr class="total total-first" style="background-color: transparent !important;">
				<td colspan="2" class="total_label" style="padding: 10px;
	border-top: 1px solid #CCCCCC; border:none!important;padding top: 28px;text-align: right;background-color: transparent;">Total HT</td>
				<td style="padding: 10px background-color: transparent;
	border-top: 1px solid #CCCCCC;border:none!important;padding top: 28px;background-color: transparent;"><strong>40,00 €</strong></td>
				
			</tr>

			<tr class="total" style="background-color: transparent !important;">
				<td colspan="2" class="total_label" style="padding: 10px;
	border:none!important;text-align: right;
	background-color: transparent;">Taxe (20.00%)</td>
				<td style="padding: 10px;
	border:none!important;background-color: transparent;"> <strong>08,00 €</strong></td>
				
			</tr>
			<tr class="total total-big" style="background-color: transparent !important;" >
				<td colspan="2" class="total_label" style="padding: 10px;
	border:none!important;text-align: right;
	background-color: transparent;font-size: 1.3em;
	padding-top: 10px;
	font-weight: bold;">Total TTC</td>
				<td style="padding: 10px;
	border:none!important;font-size: 1.3em;
	padding-top: 10px;
	font-weight: bold;background-color: transparent;"><strong>48,00 €</strong> </td>
				
			</tr>
		</tbody>

Edit:

Ok c'est cool en racontant mes problemes je pense à la solution

border:2px solid white; sur les td concerné (Pourquoi ?Quand j'ai écrit que yavait un fond noir sans rien mettre en fond, j'ai un peu percuté, même chose pour les bordures, pas de bordure, donc en noir, surement quelque chose de définit automatiquement lors de la génération du pdf

-
Edité par QuentinVidal5 9 août 2018 à 16:10:47

Le plus souvent la cause du bug est situé devant l'écran ;)