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"...

Tableau HTML dans une POPUP

JavaScript

Vue hybride

Discussions similaires

Partager

Partager