자바 스크립트 인쇄 iframe 콘텐츠 만
이것은 내 코드입니다
<script>
var body = "dddddd"
var script = "<script>window.print();</scr'+'ipt>";
var newWin = $("#printf")[0].contentWindow.document;
newWin.open();
newWin.close();
$("body",newWin).append(body+script);
</script>
<iframe id="printf"></iframe>
이것은 작동하지만 부모 페이지를 인쇄합니다. iframe 만 인쇄하려면 어떻게해야합니까?
나는 그것이 작동 할 것이라고 기대하지 않을 것이다
대신 시도
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();
jQuery가 해킹 할 수없는 경우
document.getElementById("printf").contentWindow.print();
동일한 출처 정책이 적용됩니다.
쉬운 방법 (ie7 +, firefox, Chrome, safari에서 테스트 됨)은 다음과 같습니다.
//id is the id of the iframe
function printFrame(id) {
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
return false;
}
적합 할 수도 있고 아닐 수도있는 대체 옵션이지만 다음과 같은 경우 더 깨끗합니다.
항상 페이지에서 iframe 만 인쇄하려는 경우 iframe 이외의 모든 항목을 숨기는 별도의 '@media print {}'스타일 시트를 사용할 수 있습니다. 그런 다음 페이지를 정상적으로 인쇄 할 수 있습니다.
다음 명령을 사용할 수 있습니다.
document.getElementById('iframeid').contentWindow.print();
이 명령은 기본적으로 window.print ()와 동일하지만 인쇄하려는 창이 iframe에 있으므로 먼저 해당 창의 인스턴스를 javascript 객체로 가져와야합니다.
따라서 해당 iframe을 참조하여 먼저 ID를 사용하여 iframe을 얻은 다음 contentWindow가 window (DOM) 개체를 반환합니다. 따라서이 객체에 window.print () 함수를 직접 사용할 수 있습니다.
IE8에서 위의 모든 솔루션에 문제가 있었고 IE 8 + 9, Chrome, Safari 및 Firefox에서 테스트 된 적절한 해결 방법을 찾았습니다. 내 상황에 따라 동적으로 생성 된 보고서를 인쇄해야했습니다.
// create content of iframe
var content = '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">'+
'<head><link href="/css/print.css" media="all" rel="stylesheet" type="text/css"></head>'+
'<body>(rest of body content)'+
'<script type="text/javascript">function printPage() { window.focus(); window.print();return; }</script>'+
'</body></html>';
body close 태그 앞의 printPage () javascript 메소드에 유의하십시오.
다음으로 iframe을 만들고 부모 본문에 추가하여 contentWindow를 사용할 수 있도록합니다.
var newIframe = document.createElement('iframe');
newIframe.width = '0';
newIframe.height = '0';
newIframe.src = 'about:blank';
document.body.appendChild(newIframe);
다음으로 내용을 설정하십시오.
newIframe.contentWindow.contents = content;
newIframe.src = 'javascript:window["contents"]';
여기서는 동적 콘텐츠 변수를 iframe의 창 개체로 설정 한 다음 javascript : 체계를 통해 호출합니다.
마지막으로 인쇄합니다. iframe에 초점을 맞추고 iframe 콘텐츠 내에서 javascript printPage () 함수를 호출합니다.
newIframe.focus();
setTimeout(function() {
newIframe.contentWindow.printPage();
}, 200);
return;
The setTimeout is not necessarily needed, however if you're loading large amounts of content i found Chrome occasionally failed to print without it so this step is recommended. The alternative is to wrap 'newIframe.contentWindow.printPage();' in a try catch and place the setTimeout wrapped version in the catch block.
Hope this helps someone as i spent a lot of time finding a solution that worked well across multiple browsers. Thanks to SpareCycles.
EDIT:
Instead of using setTimeout to call the printPage function use the following:
newIframe.onload = function() {
newIframe.contentWindow.printPage();
}
At this time, there is no need for the script tag inside the iframe. This works for me (tested in Chrome, Firefox, IE11 and node-webkit 0.12):
<script>
window.onload = function() {
var body = 'dddddd';
var newWin = document.getElementById('printf').contentWindow;
newWin.document.write(body);
newWin.document.close(); //important!
newWin.focus(); //IE fix
newWin.print();
}
</script>
<iframe id="printf"></iframe>
Thanks to all answers, save my day.
If you are setting the contents of IFrame using javascript document.write() then you must close the document by newWin.document.close(); otherwise the following code will not work and print will print the contents of whole page instead of only the IFrame contents.
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
Use this code for IE9 and above:
window.frames["printf"].focus();
window.frames["printf"].print();
For IE8:
window.frames[0].focus();
window.frames[0].print();
I was stuck trying to implement this in typescript, all of the above would not work. I had to first cast the element in order for typescript to have access to the contentWindow.
let iframe = document.getElementById('frameId') as HTMLIFrameElement;
iframe.contentWindow.print();
I am wondering what's your purpose of doing the iframe print.
I met a similar problem a moment ago: use chrome's print preview to generate a PDF file of a iframe.
Finally I solved my problem with a trick:
$('#print').click(function() {
$('#noniframe').hide(); // hide other elements
window.print(); // now, only the iframe left
$('#noniframe').show(); // show other elements again.
});참고URL : https://stackoverflow.com/questions/9616426/javascript-print-iframe-contents-only
'programing tip' 카테고리의 다른 글
| Django runserver 영구 (0) | 2020.12.14 |
|---|---|
| C # : " 'System.InvalidOperationException'유형의 첫 번째 예외" (0) | 2020.12.14 |
| 완료 버튼을 키보드에 추가하는 방법은 무엇입니까? (0) | 2020.12.14 |
| 모든 종속성 및 패키지를 디렉터리에 다운로드하는 방법 (0) | 2020.12.14 |
| 비동기 LINQ 쿼리를 작성하는 방법은 무엇입니까? (0) | 2020.12.13 |