[英]How to print the contents of an iFrame using Javascript on iPad?
[英]How to print iframe contents in Typescript
如何打印所有樣式的iframe內容。
我只能得到文本:
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>
這是javascript解決方案:我發現了:
window.frames["printf"].focus();
window.frames["printf"].print();
和使用
<iframe id="printf" name="printf"></iframe>
或者嘗試好老
var newWin = window.frames["printf"];
newWin.document.write('<body onload="window.print()">dddd</body>');
newWin.document.close();
如何在TypeScript中打印iframe內容?
最好將問題總結如下。 您似乎在框架,iframe和窗口之間自由切換。 您還引用window.frames
就像它是一個映射,而不是一個數組。
選擇一種方法並堅持下去...
document.getElementById('iframe'); iframe.contentWindow.document.write('<p>This is some content</p><script>window.print();</' + 'script>');
<iframe id="iframe" src="/blank.html"></iframe>
請記住,要使其正常工作,值得在同一域上使用src
,以確保跨站點阻止不會阻止此工作。
另一個解決方案可能會有所幫助:這將打印iframe和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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.