js的打印功能

使用jqPrint插件实现网页内容打印
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/jquery/jquery-migrate-1.4.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/print/jquery.jqprint-0.3.js"></script>

引入上面三个js文件,在打印按钮上加上打印方法

<a class="print-res" href="javascript:void(0);" onclick="printResult(this)">打印</a>

调用打印js

function printResult(that){
	var $that=$(that);
	if($that){
		var $wrapper=$that.parents('.servWrapper');//当前按钮父级标签的类属性,打印该标签下的所有内容
		$wrapper.jqprint({
		     debug: false, //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false
		     importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件)
		     printContainer: true, //表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。
		     operaSupport: true//表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true
		});
	}
}

遇到问题,之前报 jqprint() is not a function,查看代码后发现在 js的最后多引了一个 jquery.min.js 删掉即可;

下面添加所用到的3个JS文件

JavaScript实现打印功能有多种方法: ### 基本打印与局部打印 可以通过`window.print()`方法实现基本的页面打印,若要实现局部打印,可设置打印区域的开始和结束标记。示例代码如下: ```html <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" /> <input id="btnPrint" type="button" value="打印预览" onclick="preview(1)" /> <style type="text/css" media=print> .noprint{display : none } </style> <p class="noprint">不需要打印的地方</p> <script> function preview(oper) { if (oper < 10) { bdhtml = window.document.body.innerHTML; // 获取当前页的html代码 sprnstr = "<!--startprint" + oper + "-->"; // 设置打印开始区域 eprnstr = "<!--endprint" + oper + "-->"; // 设置打印结束区域 prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); // 从开始代码向后取html prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); // 从结束代码向前取html window.document.body.innerHTML = prnhtml; window.print(); window.document.body.innerHTML = bdhtml; } else { window.print(); } } </script> <p>XXXXX</p> <!--startprint1-->要打印的内容<!--endprint1--> ``` 通过以上代码,点击“打印”按钮会打印整个页面,点击“打印预览”按钮会打印指定区域的内容,不需要打印的内容可以添加`noprint`类隐藏起来 [^1]。 ### 利用样式隐藏不需要打印的内容 在CSS里添加`@media print`规则,将不需要打印的元素设置为`display: none`,在HTML里给这些元素添加`class="noprint"`类,打印按钮使用`window.print()`触发打印 [^2]。 ```css @media print { .noprint{ display: none; } } ``` ```html <p class="noprint">不需要打印的内容</p> <button onclick="window.print()">打印</button> ``` ### 使用Print.js打印PDF文件 Print.js的主要目的是帮助在应用程序中直接打印PDF文件,无需离开界面,也不使用嵌入。对于只需打印而无需用户打开或下载PDF文件的情况很有用,比如打印服务器端生成的报告 [^3]。 使用步骤: 1. 下载并安装Print.js。 ### 打印表格数据 可以通过创建新窗口,将表格数据写入新窗口并打印,示例代码如下 [^4]: ```html <el-button @click="print">打印</el-button> <script> tabData = [{log: '123468461354685'}]; function print() { // 打印 打开新的标签页 点击取消关闭新页面返回当前页面 var openWin = window.open(); var str = "<table style='color:#333;font-size:12px;' cellspacing='0' cellpadding='5'><tr><th style='font-weight:normal;text-align:left;border:1px solid #333'>时间</th></tr>"; for (let i = 0; i < tabData.length; i++) { str += '<tr><td style="border:1px solid #333;border-top:0;">' + tabData[i].log + '</td></tr>'; } str += '</table>'; openWin.document.write(str); openWin.document.close(); openWin.print(); openWin.close(); } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值