IT박스

Javascript에서 인쇄 미리보기를 어떻게 호출 할 수 있습니까?

itboxs 2020. 12. 2. 08:15
반응형

Javascript에서 인쇄 미리보기를 어떻게 호출 할 수 있습니까?


로드시 인쇄 미리보기 페이지를 시작해야하는 페이지가 있습니다.

나는 이것을 찾았다:

var OLECMDID = 7;
/* OLECMDID values:
* 6 - print
* 7 - print preview
* 1 - open window
* 4 - Save As
*/
var PROMPT = 1; // 2 DONTPROMPTUSER
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(OLECMDID, PROMPT);
WebBrowser1.outerHTML = "";

그러나...

  1. FireFox에서는 작동하지 않습니다.
  2. 그것은 추한 것입니다.

IE를위한 더 나은 방법이나 FireFox에서 작동하는 방법이 있습니까?


인쇄 미리보기는 브라우저의 기능이므로 보안 위험이 있으므로 JavaScript에 의해 호출되지 않도록 보호해야합니다.

그렇기 때문에 예제에서 JavaScript 보안 문제를 우회하는 Active X를 사용합니다.

따라서 이미 가지고 있어야하는 인쇄 스타일 시트를 사용하고 media = print 대신 media = screen, print에 대해 표시하십시오.

Alist Apart : Going to Print 에서 인쇄 스타일 시트 주제에 대한 좋은 기사를 읽으십시오 .


브라우저 간 자바 스크립트에서 가능한 최선의 방법은 window.print()(Firefox 3에서) 인쇄 미리보기 대화 상자가 아닌 '인쇄'대화 상자를 표시하는이라고 생각합니다.


자바 스크립트를 사용하여 할 수 있습니다. html / aspx 코드가 다음과 같이 진행된다고 가정합니다.

<span>Main heading</span>
<asp:Label ID="lbl1" runat="server" Text="Contents"></asp:Label>
<asp:Label Text="Contractor Name" ID="lblCont" runat="server"></asp:Label>
<div id="forPrintPreview">
  <asp:Label Text="Company Name" runat="server"></asp:Label>
  <asp:GridView runat="server">

      //GridView Content goes here

  </asp:GridView
</div>

<input type="button" onclick="PrintPreview();" value="Print Preview" />

여기에서 "인쇄 미리보기"버튼을 클릭하면 인쇄 할 데이터가있는 창이 열립니다. 'forPrintPreview'가 div의 ID임을 확인하십시오. 인쇄 미리보기 기능은 다음과 같이 진행됩니다.

function PrintPreview() {
 var Contractor= $('span[id*="lblCont"]').html();
 printWindow = window.open("", "", "location=1,status=1,scrollbars=1,width=650,height=600");
 printWindow.document.write('<html><head>');
 printWindow.document.write('<style type="text/css">@media print{.no-print, .no-print *{display: none !important;}</style>');
 printWindow.document.write('</head><body>');
 printWindow.document.write('<div style="width:100%;text-align:right">');

  //Print and cancel button
 printWindow.document.write('<input type="button" id="btnPrint" value="Print" class="no-print" style="width:100px" onclick="window.print()" />');
 printWindow.document.write('<input type="button" id="btnCancel" value="Cancel" class="no-print"  style="width:100px" onclick="window.close()" />');

 printWindow.document.write('</div>');

 //You can include any data this way.
 printWindow.document.write('<table><tr><td>Contractor name:'+ Contractor +'</td></tr>you can include any info here</table');

 printWindow.document.write(document.getElementById('forPrintPreview').innerHTML);
 //here 'forPrintPreview' is the id of the 'div' in current page(aspx).
 printWindow.document.write('</body></html>');
 printWindow.document.close();
 printWindow.focus();
}

'인쇄'및 '취소'버튼에 css 클래스 '인쇄 안 됨'이 있으므로이 버튼은 인쇄물에 나타나지 않습니다.

참고 URL : https://stackoverflow.com/questions/230205/how-can-print-preview-be-called-from-javascript

반응형