Printen via iframe
Ik zoek een mooie manier waarmee ik een html-pagina kan printen via een button op een andere pagina.
Dus: ik heb een pagina met een print-button, en die moet een andere html-pagina printen die ook op de server staat.
Dat klinkt makkelijk, maar ik zoek er een die in meerdere browsers werkt. En die heb ik nog niet gevonden.
Iemand tips?
Code (php)
1
2
2
<iframe src="print.php?ID=29" style="display:none;" name="director-29"></iframe>
<a class="btn btn-default btn-xs" onclick="frames['director-29'].print()"><i class="fa fa-print"></i> PRINT</a>
<a class="btn btn-default btn-xs" onclick="frames['director-29'].print()"><i class="fa fa-print"></i> PRINT</a>
https://stackoverflow.com/a/473350
Verder staan er in die thread nog meer handige tips.
Gewijzigd op 12/04/2018 15:38:12 door - Ariën -
Code (php)
1
function printPage() { print(); }
Dit in de pagina met de button:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function printIframe(id)
{
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
iframe.focus();
ifWin.printPage();
return false;
}
{
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
iframe.focus();
ifWin.printPage();
return false;
}
Maar hoe maak ik nu een button die print.php?ID=XXXX oproept?
En klaar is het. Als je pagina wilt instellen, bijvoorbeeld geen achtergrondfiguur, zoek dan eens op @print css.
Link:test
print.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printPage() { print(); }
</script>
</head>
<body>
Deze pagina moet geprint worden.
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printPage() { print(); }
</script>
</head>
<body>
Deze pagina moet geprint worden.
</body>
</html>
paginametbutton.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printIframe(id)
{
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
iframe.focus();
ifWin.printPage();
return false;
}
</script>
</head>
<body>
<iframe url="print.html" id="test"></iframe>
<button onclick="printIframe('test');">DE GROTE PRINTKNOP</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printIframe(id)
{
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
iframe.focus();
ifWin.printPage();
return false;
}
</script>
</head>
<body>
<iframe url="print.html" id="test"></iframe>
<button onclick="printIframe('test');">DE GROTE PRINTKNOP</button>
</body>
</html>
Maar er gebeurt niks als je op de print-knop drukt... in geen een browser... Wat gaat er mis?
Gewijzigd op 13/04/2018 14:25:23 door Daan Vee
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printFrame(id) {
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
return false;
}
</script>
</head>
<body>
<iframe url="print.html" id="test"> </iframe>
<button onclick="printFrame('test');">DE GROTE PRINTKNOP</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printFrame(id) {
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
return false;
}
</script>
</head>
<body>
<iframe url="print.html" id="test"> </iframe>
<button onclick="printFrame('test');">DE GROTE PRINTKNOP</button>
</body>
</html>
Succes!
Super, de printfuctie wordt nu geladen.
Enige probleem is dat de preview in de printfunctie helemaal leeg is. En dat is print.html niet.
Gaat er nog iets mis bij het laden?
Het werkt nu in Safari en Firefox... Chrome niet, IE weet ik niet.
Valt daar nog wat aan te doen?
Ik heb nu dit:
test.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printFrame(id) {
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
return false;
}
</script>
</head>
<body>
<iframe src="print.html" id="test"> </iframe>
<button onclick="printFrame('test');">DE GROTE PRINTKNOP</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printFrame(id) {
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
return false;
}
</script>
</head>
<body>
<iframe src="print.html" id="test"> </iframe>
<button onclick="printFrame('test');">DE GROTE PRINTKNOP</button>
</body>
</html>
print.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printPage() { print(); }
</script>
</head>
<body>
Hier alles wat geprint moet worden...
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printPage() { print(); }
</script>
</head>
<body>
Hier alles wat geprint moet worden...
</body>
</html>
Safari en Firefox werkt wel...
IE kan ik niet testen....
Gewijzigd op 14/04/2018 19:49:29 door Daan Vee
test.html:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printFrame(id) {
var frm = document.getElementById(id).contentWindow;
frm.focus();
frm.postMessage('print', '*');
return false;
}
</script>
</head>
<body>
<iframe src="print.html" id="test"> </iframe>
<button onclick="printFrame('test');">DE GROTE PRINTKNOP</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function printFrame(id) {
var frm = document.getElementById(id).contentWindow;
frm.focus();
frm.postMessage('print', '*');
return false;
}
</script>
</head>
<body>
<iframe src="print.html" id="test"> </iframe>
<button onclick="printFrame('test');">DE GROTE PRINTKNOP</button>
</body>
</html>
print.html:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
(function() {
window.addEventListener('message', function(event) {
if (event.data == 'print') {
window.print();
}
});
})();
</script>
</head>
<body>
Hier alles wat geprint moet worden...
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
(function() {
window.addEventListener('message', function(event) {
if (event.data == 'print') {
window.print();
}
});
})();
</script>
</head>
<body>
Hier alles wat geprint moet worden...
</body>
</html>
Gewijzigd op 14/04/2018 21:06:16 door Ben van Velzen
Nog 1 ding, hoe zorg ik ervoor dat het iframe in alle browsers verborgen is?
Dit lijkt niet te werken...?
Code (php)
1
<iframe src="print.html" id="test" style="display:none;"> </iframe>
Edit:
Ik lees ook dat HTML5 een hidden argument heeft voor haast elke tag.
Gewijzigd op 14/04/2018 21:46:47 door - Ariën -
visibility: hidden; width:0; height: 0 verbergt voor mij correct.
Gewijzigd op 14/04/2018 22:01:08 door - Ariën -