js-web打印

于 2020-10-21 16:57:56 发布
阅读量149 收藏
点赞数
文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42570364/article/details/109204807
版权

1.指定打印区域

<div id="div1">div中的要打印的所有内容</div>
<a href="javascrīpt:printme()" target="_self">打印</a>
<scrīpt language="javascrīpt">
	function printme()
		{
			document.body.innerHTML=document.getElementById('div1').innerHTML;
			window.print();
		}
</scrīpt>

2.指定不打印的区域

<style media=print type="text/css"> 
	.noprint{
		visibility:hidden
	} 
</style> 
<div id="div1">div中的要打印的所有内容
	<p class="noprint">将不打印的代码放在这里。</p>
</div>
<p class="noprint">将不打印的代码放在这里。</p>
<a href="javascrīpt:printme()" target="_self">打印</a>
<scrīpt language="javascrīpt">
	function printme()
		{
			document.body.innerHTML=document.getElementById('div1').innerHTML;
			window.print();
		}
</scrīpt>

3.案例demo

 		<form class="form-horizontal">
            <div id="printingDiv">
                <div class="form-group">
                    <div class="col-sm-2 control-label">备案单位:</div>
                    <div class="col-sm-10" style="margin-top: 7px">
                        <div>
                            <span id="copyRecord">{{registrationForm.lcRegistrationVo.record}}</span>
                            <span class="spanCopy" @click="copyValue('copyRecord')">复制</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">备案人:</div>
                    <div class="col-sm-10" style="margin-top: 7px">
                        <div>
                            <span id="copyRecordPerson">{{registrationForm.lcRegistrationVo.recordPerson}}</span>
                            <span class="spanCopy" @click="copyValue('copyRecordPerson')">复制</span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-2 control-label">身份证号:</div>
                    <div class="col-sm-10" style="margin-top: 7px">
                        <div>
                            <span id="copyIdCard">{{registrationForm.lcRegistrationVo.idCard}}</span>
                            <span class="spanCopy" @click="copyValue('copyIdCard')">复制</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">统一社会信用代码:</div>
                    <div class="col-sm-10" style="margin-top: 7px">
                        <div>
                            <span id="copySocialCode">{{registrationForm.lcRegistrationVo.socialCode}}</span>
                            <span class="spanCopy" @click="copyValue('copySocialCode')">复制</span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-2 control-label">联系电话:</div>
                    <div class="col-sm-10" style="margin-top: 7px">
                        <div>
                            <span id="copyPhone">{{registrationForm.lcRegistrationVo.phone}}</span>
                            <span class="spanCopy" @click="copyValue('copyPhone')">复制</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">备案名称:</div>
                    <div class="col-sm-10" style="margin-top: 7px">
                        <div>
                            <span id="copyRecordName">{{registrationForm.lcRegistrationVo.recordName}}</span>
                            <span class="spanCopy" @click="copyValue('copyRecordName')">复制</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">地址:</div>
                    <div class="col-sm-10" style="margin-top: 7px">
                        <div>
                            <span id="copyAddress">{{registrationForm.lcRegistrationVo.address}}</span>
                            <span class="spanCopy" @click="copyValue('copyAddress')">复制</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">规格:</div>
                    <div class="col-sm-10" style="margin-top: 7px">
                        <div>
                            <span id="copySpecs">{{registrationForm.lcRegistrationVo.specs}}</span>
                            <span class="spanCopy" @click="copyValue('copySpecs')">复制</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">使用材质:</div>
                    <div class="col-sm-10" style="margin-top: 7px">
                        <div>
                            <span id="copyMaterial">{{registrationForm.lcRegistrationVo.material}}</span>
                            <span class="spanCopy" @click="copyValue('copyMaterial')">复制</span>
                        </div>
                    </div>
                </div>
                <div v-show="showMoney" class="form-group">
                    <div class="col-sm-2 control-label">代缴费用:</div>
                    <div class="col-sm-10" style="margin-top: 7px">
                        <div>
                            <span id="copyMoney">{{registrationForm.money}}元</span>
                            <span class="spanCopy" @click="copyValue('copyMoney')">复制</span>
                        </div>
                    </div>
                </div>
                <div v-show="showEason">
                    <div class="form-group">
                        <div class="col-sm-2 control-label">{{registrationForm.easonStatus}}:</div>
                        <div class="col-sm-10" style="margin-top: 7px">
                            <div>{{registrationForm.eason}}
                                <span id="copyEason">{{registrationForm.eason}}</span>
                                <span class="spanCopy" @click="copyValue('copyEason')">复制</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group" style="margin-top: 7px">
                <div class="col-sm-2 control-label">资料下载:</div>
                <input type="button" class="btn btn-primary" @click="downloadDetails" value="审核资料下载"/>
            </div>
            <div class="form-group" style="margin-top: 7px">
                <div class="col-sm-2 control-label">打印:</div>
                <input type="button" class="btn btn-primary" @click="printingDetails" value="打印"/>
            </div>
        </form>

		printingDetails: function () {
            document.body.innerHTML= document.getElementById('printingDiv').innerHTML;
            window.print();
        },
媤纹琴獣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现打印
01-23
js实现打印，里面有个demo,使用起来特别简单，这个是我从github里面找的，也用于开发，挺方便的
纯js在线WEB打印设计模块
09-05
纯js在线WEB打印设计模块,用来设计在线快递模板,打印配货单模板很不错.
JS web打印
baihaixiao的专栏
01-21 9891
11.1  Web打印Web打印是一种常用的打印方式，其使用方法简单、方便、快捷，在浏览网页的同时就可以实现打印的功能。实例291  调用IE自身的打印功能实现打印实例说明通过JavaScript调用IE自身的打印功能实现打印，这种方法比较简单，也是常用的打印方式。使用该方法只须将要打印的页面设计好，再通过JavaScript的window对象的print( ) 方法调用IE的
js调打印机打印web页面
月亮岛T-MAC的博客
06-22 1291
js调打印机打印web页面1.全局打印,打印整个页面function toPrint(){ window.print(); }2.局部打印，把不想打印的部分隐藏起来，可以用 onbeforeprint（打印之前）、onafterprint（打印之后）事件。当然，也可以自己写个functon，在调window.print()之前利用js或者jquery隐藏你想不打印的部分。function w...
Printer_js_css 纯js实现web打印服务，完全兼容
08-22
Printer_js_css 纯js实现web打印服务，可兼容各种浏览器，已应用于项目中，送给大家进行参考，希望有帮助
html-web转pdf项目-javascript-css-项目分享.zip
最新发布
01-19
HTML到PDF转换是一个常见的需求，尤其在Web开发中，它允许用户将网页内容保存为方便阅读和打印的PDF文档。这个“html-web转pdf项目-javascript-css-项目分享.zip”压缩包显然包含了一个使用JavaScript、CSS和HTML...
dicomweb-client：DICOMweb客户端JavaScript实现
02-03
JavaScript客户端实现。 有关更多详细信息，请参考 。 目标 这是正在进行的工作，不应在临床实践中使用。 该项目的主要动机是： 支持分别使用RESTful服务STOW-RS，QIDO-RS和WADO-RS通过Web存储，查询和检索DICOM...
the-print-preview-of-the-Web-control.rar_C web 打印_Print Previe
09-23
在IT行业中，Web打印预览是一项重要的功能，它允许用户在实际打印之前查看网页或文档在纸张上的呈现效果。本资源"the-print-preview-of-the-Web-control.rar"提供了一个基于VC++6.0的Web打印预览控件，使得开发者...
JasperReports -- 客户端打印(WEB网页打印)
03-17
**JasperReports -- 客户端打印（WEB网页打印）** JasperReports 是一个功能强大的...然而，随着现代浏览器对Java Applet的支持逐渐减少，开发者可能需要考虑使用其他技术，如JavaScript库或Web服务来实现类似功能。
js打印文件，一个WEB打印的JS脚本
04-19
一个WEB打印的JS脚本，支持WEB程序开发，可实现WEB页面直接打印。
js控制web打印(局部打印)方法整理
12-10
首先定义css样式： 代码如下: @media print { .noprint { display: none;color:green } } 对于不想打印的内容只用在标签中加上 class=noprint即可，打印的时候客户也不会看到页面任何变化。 打印时调用 window.print(); 另外几种js局部打印的方法： 移花接木： 打印的时候，把需要打印的内容替换成整个body内容（用户会在打印的时候看到变化，客户体验不太好） 代码如下: function preview(oper) ……{ if (oper < 10)……{ bdhtml=window.document.body
js打印Web页面
11-03
js打印WEB页面,使用js打印WEB页面
js打印WEB页面与打印预览
02-27
js打印WEB页面与打印预览
JS 实现web分页打印功能
11-09
使用JS的Window对象的Print方法实现兼容性强的分页打印功能，可直接运行，代码直接复制即可用。
web端直接打印实例（免预览可直接打开运行测试）
01-14
web端直接打印实例，IE浏览器可直接打开测试直接打印效果。可能需要设置ActiveX启用。谷歌浏览器修改下快捷方式即可实现。详见我的博客文章https://blog.csdn.net/zhangxiaoyu138/article/details/86472749
JS实现Web网页打印功能（IE）
djpmsoa95092的博客
09-06 375
问题描述： JS实现Web网页打印功能 问题解决： 这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍： WebBrowser是IE内置的浏览器控件，无需用户下载。与其相关的技术要求有：打印文档的生成、页面设置、打印操作的实现等几个环节。 一、WebBrowser控件 <object ID=...
Web打印之Js&CSs控制.
03-05 1651
1. IE浏览器. 文件->页面设置. 把页脚去掉就行了. 2.用代码. //有提示的.. New Document dim hkey_root,hkey_path,hkey_key hkey_root="HKEY_CURRENT_USER" hkey_path="/Software/Microsoft/Internet Explorer/PageSetup" //设置网页打印的页
WEB打印分页类(JS)
ldw701的专栏
12-20 1309
HTML>HEAD>TITLE>printTITLE>meta http-equiv="content-type" content="text/html;charset=gb2312">style>/**//** *    打印相关*/ @media print {}{    .notprint     {        display:none;    }    .PageNext    {}{
【web打印】之jsprint
柠檬加冰
08-07 3610
js引用<!-- <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> --> <script src="/js/js/jquery.jqprint-0.3.js"></script> <script src="https://cdn.bootcss.com/jquery-migrate/1.2.1/j
Web打印挑战与IE解决方案详解
本资源是一份关于Web打印教程的详细指南，主要针对如何在Web应用中实现精确的打印功能，特别是解决浏览器局限性带来的挑战。以下是主要内容的深入解析： 1. 浏览器打印功能菜单：这是最基本的解决方案，无需扩展...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值