How to print iframe contents in Typescript
Question
How can I print iframe contents with all the styles.
I was able to get the text only:
app.ts
let bodyUrl="https://www.w3schools.com/tags/tag_iframe.asp"
print(){
let printContents, popupWin;
printContents = document.getElementById('iframe');
var innerDoc = printContents.contentDocument || printContents.contentWindow.document;
let printBody = innerDoc.body.innerText //got the text
//get whole iframe body with styles for print?
popupWin = window.open('', '_blank', 'top=0,left=0, width=900,height=700');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>My Print</title>
<style>
@media print{
.doNotPrint{
display:none;!important
}
}
</style>
</head>
<body onload="window.print();window.close()">
${printBody}
</body>
</html>`
);
popupWin.document.close();
}
html
<iframe id="iframe" class="iframe-content" [src]="bodyUrl"></iframe>
Here is javascript solution: that I found:
window.frames["printf"].focus();
window.frames["printf"].print();
and use
<iframe id="printf" name="printf"></iframe>
Alternatively try good old
var newWin = window.frames["printf"];
newWin.document.write('<body onload="window.print()">dddd</body>');
newWin.document.close();
How to print iframe content in TypeScript?
2 answers
solution1
1 ACCPTED 2018-05-30 10:03:11
The problem is best summed up as this. You seem to be liberally switching between frames, iframes, and windows. You are also referring to window.frames as if it is a map, not an array.
Pick one method and stick to it...
document.getElementById('iframe'); iframe.contentWindow.document.write('<p>This is some content</p><script>window.print();</' + 'script>');
<iframe id="iframe" src="/blank.html"></iframe>
Bear in mind that to make this work, it is worth using a src on the same domain to ensure cross-site blocking doesn't prevent this from working.
solution2
0 2018-05-31 16:14:00
Another solution might be helpful: This will print the contents of the iframe and the html.
html
<iframe id="iframe" class="iframe-content" [src]="bodyUrl"></iframe>
<div id="print-section">
<h2>Print me too</h2>
</div>
ts.
print() {
let frame
let frameBody
frame = document.getElementById('iframe')
frameBody = frame.contentWindow.document.documentElement.outerHTML; //will get all html within the iframe
let printContents, popupWin;
let printHeader = document.getElementById('print-section').innerHTML; //will get html of the div by id
popupWin = window.open('', '_blank', 'top=0,left=0, width=900,height=700');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print Preview</title>
<style>
@media print{
.doNotPrint{
display:none;!important
}
.printVisible{
visability: content;
}
.print-header{
font-size: 14px;
font-weight: bold;
min-width: 100px;
}
.print-cont{
}
.print-header-wrapper{
padding-bottom: 50px
}
}
</style>
</head>
<body onload="window.print();window.close()">
${printHeader}
${frameBody}
</body>
</html>`
);
popupWin.document.close();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.