Tableau HTML dans une POPUP

**pernotjln** · 05/11/2012, 19h25

Bonjour,

Je voudrais faire un aperçu avant impression de mon tableau HTML et j'ai un soucis avec ma fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Popup(){
	var tableau = document.getElementById("tableauCarte");
 
	var donnee = tableau.innerHTML;
 
	var maFenetre = window.open('', 'Mon catalogue de télécartes');
	maFenetre.document.write('<html><head><title>Mon catalogue de télécartes</title>');
	maFenetre.document.write('<link rel="stylesheet" href="style.css" type="text/css" />');
	maFenetre.document.write('</head><body><table id="tableauCarte">');
	maFenetre.document.write(donnee);
	maFenetre.document.write('</table></body></html>');
	maFenetre.print();
	maFenetre.close();
}

Quand elle s’exécute elle m'ouvre une fenêtre popup avec mon tableau html mais celui ci étant plus grand qu'une page est couper en plein milieu de cellule !

Merci d'avance pernotjln.

**headmax** · 06/11/2012, 19h42

Salut essaye en incluant une balise style avec media screen.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function Popup(){
	var tableau = document.getElementById("tableauCarte");
 
	var donnee = tableau.innerHTML;
 
	var maFenetre = window.open('', 'Mon catalogue de télécartes');
	maFenetre.document.write('<html><head><title>Mon catalogue de télécartes</title>');
        maFenetre.document.write('<style>@media screen{table{display:block;visibility:visible;}}');
	maFenetre.document.write('<link rel="stylesheet" href="style.css" type="text/css" />');
	maFenetre.document.write('</head><body><table id="tableauCarte">');
	maFenetre.document.write(donnee);
	maFenetre.document.write('</table></body></html>');
	maFenetre.print();
	maFenetre.close();
}

Je n'ai pas testé, mais l'idée est au niveau du style.

Bonne soirée

**pernotjln** · 06/11/2012, 23h01

J'ai essayer avec ce code mais c'est toujours la même chose, le tableau est mal découpé. ^^

PS : tu as oublié de refermer la balise style, j'ai galéré à le voir, mon tableau ne s'affichait plus. xD

**sekaijin** · 07/11/2012, 14h42

Attention à l'ouverture de la fenêtre
Toujours tester si la fenêtre c'est ouverte
sinon le script peut planter complètement

de façon générale en programmation quelque soit le langage (même en javascript) on n'utilise un objet uniquement lorsqu'on a la garantie qu'il existe.

donc dans ton code 1°) getElementById peut te retourner null
et 2°) la fenêtre à peut être été bloqué par l'utilisateur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function Popup(){
	var tableau = document.getElementById("tableauCarte");
	if(tableau)
		var donnee = tableau.innerHTML;
	}
 
	var maFenetre = window.open('', 'Mon catalogue de télécartes');
	if (maFenetre) {
		...
	}
}

A+JYT

**SpaceFrog** · 07/11/2012, 14h45

perso je passerais par un popin et pas un popup ...
du coup pour le print on bascule tous les élements de la page en display none pour le media screen et print, puis juste le popin en display block pour le popin en media print

**NoSmoking** · 07/11/2012, 18h50

Bonjour,
il existe au moions, 2 solutions
- CSS3 Module: Paged Media
- le formatage de la sortie à la "mano" fonction des données disponibles en intégrant des page-break-after: always au bon endroit.

**pernotjln** · 07/11/2012, 19h22

Merci de vos réponses j'ai modifié mon code pour la vérification de l'existence du tableau et de la fenêtre.

je pense faire avec des page-break-after mais je ne sais pas ou les mettre ?

**NoSmoking** · 07/11/2012, 22h29

Fais des tests de pagination pour voir ce que tu peux imprimer par page, gère une feuille de style pour media="print"...

**sekaijin** · 07/11/2012, 23h12

de toute façon tu ne peux pas maitriser l'espace disponible sur la page de paprier du client

donc la pagination ce ne peut être que très approximative
je dirais même qu'elle peut être très génante

par exemple du décide de couper ton texte à une ligne n parce ce qu'à la ligne n+1 commence un nouveau paragraphe.

si l'espace sur le papier du client et trop petite il se retrouve avec la ligne n seule sur une page.

que vaut-il mieux avoir des chapitres coupés ou des ligne isolées sur des pages ?

certaine imprimantes ont des marges incontrounable (du fait du matériel)
d'autre sont capable d'imprimer sans marges.

A+JYT

**pernotjln** · 10/11/2012, 09h39

Merci a tous de vos réponse ! Je pense que je vais passer par une lib php qui me fera sa en pdf j'ai vu des exemples qui me convienne xD

Tableau HTML dans une POPUP

JavaScript

Discussions similaires

Partager

Partager