PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
D

Printen via iframe

Door Daan Vee op 12-04-2018 14:09
4.424 views
Hi,

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?
Ariën
12-04-2018 14:30
Welke heb je gevonden? Misschien dat er tegen een beveiliging wordt gehikt?
D
Daan Vee
12-04-2018 15:20 

<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>
D
Daan Vee
12-04-2018 16:29
Wat ik nog niet helemaal begrijp, heb dit in de iframepagina:


function printPage() { print(); }


Dit in de pagina met de button:


function printIframe(id)
{
    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?
J
Jan te Pas
12-04-2018 19:18
Je geeft het iframe bij de definitie een id mee. Bijvoorbeeld <iframe id=“samenvatting” > en bij de button <button onclick=“printIframe(‘samenvatting’);”>PRINT</button>
En klaar is het. Als je pagina wilt instellen, bijvoorbeeld geen achtergrondfiguur, zoek dan eens op @print css.
D
Daan Vee
13-04-2018 14:23 gewijzigd op 13-04-2018 14:25
Ik heb letterlijk het volgende:

Link:test

print.html

<!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>


paginametbutton.html

<!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>


Maar er gebeurt niks als je op de print-knop drukt... in geen een browser... Wat gaat er mis?
Ariën
13-04-2018 14:47
Wat zegt de JS-debugger?
J
Jan te Pas
13-04-2018 15:18
Hier heb je een werkende functie:

<!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>


Succes!
D
Daan Vee
14-04-2018 10:06
Hi Jan,

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?
B
Ben van Velzen
14-04-2018 11:16
Ja, het moet iframe src zijn en niet iframe url.

Reageren

Inloggen om te reageren