JS에서 인쇄를 구현하는 방법(코드와 결합된 자세한 답변)

亚连
풀어 주다: 2018-05-18 10:31:05
원래의
2100명이 탐색했습니다.

다음은 JS에서 인쇄를 구현하는 방법을 정리한 것입니다. 관심 있는 학생들은 한 번 살펴보세요.

1.JS 방식으로 인쇄 구현

방법 1: window.print()

window.print(); 다음은 인터넷에서 가져온 부분 인쇄의 예입니다. 이 예의 단점은 인쇄하면 페이지의 내용이 수정된다는 것입니다.

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>局部打印案例</title>  
<script type="text/javascript">     
    function doPrint() {      
        bdhtml=window.document.body.innerHTML;      
        sprnstr="<!--startprint-->";      
        eprnstr="<!--endprint-->";      
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);      
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));      
        window.document.body.innerHTML=prnhtml;   
        window.print();      
}      
</script>  
</head>  
<body>  
<p>1不需要打印的地方</p>  
<p>2这里不要打印啊</p>  
<!--startprint--><!--注意要加上html里star和end的这两个标记-->  
<h1>打印标题</h1>  
<p>打印内容~~</p>  
<!--endprint-->  
<button type="button" onclick="doPrint()">打印</button>  
<p>不打印的地方啊哈哈哈哈</p>  
<p>2</p>  
</body>  
</html>  
[javascript] view plain copy
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>局部打印案例</title>  
<script type="text/javascript">     
    function doPrint() {      
        bdhtml=window.document.body.innerHTML;      
        sprnstr="<!--startprint-->";      
        eprnstr="<!--endprint-->";      
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);      
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));      
        window.document.body.innerHTML=prnhtml;   
        window.print();      
}      
</script>  
</head>  
<body>  
<p>1不需要打印的地方</p>  
<p>2这里不要打印啊</p>  
<!--startprint--><!--注意要加上html里star和end的这两个标记-->  
<h1>打印标题</h1>  
<p>打印内容~~</p>  
<!--endprint-->  
<button type="button" onclick="doPrint()">打印</button>  
<p>不打印的地方啊哈哈哈哈</p>  
<p>2</p>  
</body>  
</html>
로그인 후 복사

방법 2: HTML 태그 를 사용하여 웹브라우저 컨트롤을 도입하세요

이 방법은 IE에서만 호환되며 동시에 다른 브라우저에서만 사용할 수 있습니다. IE10 이하 브라우저에서는 호출 방법은 다음과 같습니다.

<body>  
    <object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> </object>  
</body>  
<script>  
    WebBrowser.ExecWB(1,1)  //打开   
    WebBrowser.ExecWB(2,1)  //关闭现在所有的IE窗口,并打开一个新窗口   
    WebBrowser.ExecWB(4,1)  //保存网页  
    //--------------- 常用 ---------------      
    WebBrowser.ExecWB(6,1)  //打印   
    WebBrowser.ExecWB(7,1)  //打印预览   
    WebBrowser.ExecWB(8,1)  //打印页面设置   
    //-------------------------------------   
    WebBrowser.ExecWB(10,1) //查看页面属性   
    WebBrowser.ExecWB(15,1) //撤销   
    WebBrowser.ExecWB(17,1) //全选   
    WebBrowser.ExecWB(22,1) //刷新   
    WebBrowser.ExecWB(45,1) //关闭窗体无提示  
</script>  
<body>  
    <object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> </object>  
</body>  
<script>  
    WebBrowser.ExecWB(1,1)  //打开   
    WebBrowser.ExecWB(2,1)  //关闭现在所有的IE窗口,并打开一个新窗口   
    WebBrowser.ExecWB(4,1)  //保存网页  
    //--------------- 常用 ---------------      
    WebBrowser.ExecWB(6,1)  //打印   
    WebBrowser.ExecWB(7,1)  //打印预览   
    WebBrowser.ExecWB(8,1)  //打印页面设置   
    //-------------------------------------   
    WebBrowser.ExecWB(10,1) //查看页面属性   
    WebBrowser.ExecWB(15,1) //撤销   
    WebBrowser.ExecWB(17,1) //全选   
    WebBrowser.ExecWB(22,1) //刷新   
    WebBrowser.ExecWB(45,1) //关闭窗体无提示  
</script>
로그인 후 복사

이 방법의 장점은 IE에서 인쇄 미리보기가 팝업된다는 점입니다. 이는 인쇄에 있어서 매우 사용자 친화적인 기능이지만, 안타깝게도 IE 브라우저의 상위 버전에서는 가능합니다. WebBrowser를 더 이상 지원하지 않습니다

방법 3: document.execCommand("print")

이 방법은 window.print()와 마찬가지로 다양한 버전의 브라우저와도 호환됩니다. Chrome의 인쇄 대화 상자에는 자체 미리보기 기능이 있지만 IE, Firefox에서는 미리보기 기능 없이 인쇄 설정 대화상자만 나타납니다.

위 내용은 JS에서 인쇄를 구현하는 방법에 대해 제가 정리한 방법입니다. 앞으로 도움이 되길 바랍니다.

관련글 :

js에서 파일을 다운로드하는 간단한 조작에 대해 (코드첨부, 상세답변)

js에서 함수 앞에 !를 추가하는 것에 대한 질문, 코드가 첨부되어있습니다

JS를 설명하고 JS 세부정보 앱이 상호작용하는 방식(코드 첨부)

위 내용은 JS에서 인쇄를 구현하는 방법(코드와 결합된 자세한 답변)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!