这是一个纯js的jQuery插件,项目地址:http://barcode-coder.com/en/barcode-jquery-plugin-201.html使用示例: 1<!doctype html> 2<html> 3<head> 4<title>jQuery Barcode</title> 5<script type="text/javascript" src="jquery-1.4.4.min.js"></script> 6<script type="text/javascript" src="jquery-barcode.js"></script> 7<style type="text/css"> 8 .barcodeImg{margin:10px 0px} 9</style>10</head>11<body>12<div st...
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(); }; 原文:http://www.cnb...
这次给大家带来jquery的插件怎么打印页面内容,jquery的插件怎么打印页面内容注意事项有哪些,下面就是实战案例,一起来看一下。业务场景客户需要在页面有一个打印按钮,点击之后可以打印Echarts图表的内容以及文字提示信息,经谷歌搜索发现,实现方法大概有三种之多,其他两种不太熟悉,而采用的这种打印方式是一个在jQuery的基本上开发的一个print插件,因此可以使用jQuery的方式查找元素,因此决定采用这种方式。先看一下实现的...
本文主要介绍了基于jQuery实现文字打印动态效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。主体html<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>打印文字效果</title><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript"><script/>
<head>
<body><p id="typing">The furthest distance in the world.Is not between life and dea...
格式要求(例):On Friday, July 14, 2017我的思路是用js就可以实现了,具体代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* ...
每次用alert输出信息,信息量小,调试不方便,有这样一个方法,能更好的写js代码,因为用Jquery较多,所以只写了Jquery的调试方法,还可以依据自己的喜好,在调试信息前加时间/*** 打印JavaScript调试信息,定位使用绝对定位,每次打印的信息空一行*/function plInfo(obj){ if($("#show").length==0) $("body").append("<div id=\"show\" style=\"position:fixed;left0px;top:0px;width:500px;line-height:14px;font-size:12px;co...
在IE9中打印没有问题,但IE6、7、8都会出现前几页空白的情况(只显示列头信息),找了很久,才发现是ui-jqgrid-bdiv样式类(在ui.jqgrid.css内)中的overflow引起的,在打印之前将其删除,打印之后将其恢复即可。 打印时的CSS样式如下: 代码如下: #accordion h3, #vcol, div.loading, div.ui-tabs-hide,ul.ui-tabs-nav li, td.HeaderRight { display:none } .ui-jqgrid-titlebar, .ui-jqgrid-title{ display:none } .ui-jqgrid-bdiv...
web的打印方法具我自己懂得知道的有: 1、JQuery插件Jqprint实现 2、JQery打印插件PrintArea实现网页打印 3、CSS控制网页打印样式 JQuery插件Jqprint实现: 首先要导入js文件: jquery.jqprint.js下载 代码如下: html代码: 代码如下: 这个打印时是显示的 这个打印时是隐藏的。 javascript代码: 代码如下: $(document).ready(function() { $("#print").click(function(){ $(".my_show").jqprint(); }) }); 该插件还...
第一步: jquery.PrintArea.js下载 js引用 代码如下: html引用: 代码如下: 这个是打印时显示的。 这个是打印时隐藏的。 javascript代码: 代码如下: $(document).ready(function(){ $("#print").click(function(){ $(".my_show").printArea(); }); }); 这个插件还提供了一些参数可配置,使用的方法:$(element).printArea(option). 这个方法我自己没有用过,大家尝试是,有问题的留言哈。 参数设置: 1.mode:模式,...
我们知道javascript可以用alert输出变量的值,但是有时候返回的是一个对象,json格式的数据,jQuery可以用这个方法循环遍历读出对象的值,假如这个对象名称是obj,循环遍历打印它的值: 代码如下: $.each(obj,function(key,val){ if($.isPlainObject(val) || $.isArray(val)){ subObj(val); }else{ alert(key+=+val); } });
本节内容:JQuery、CSS操作打印样式。
一、添加打印样式
1,为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css:代码如下:
用于打印的css:代码如下:
2,import方式: 代码如下: @import url("css/printstylesheet.css") print;
3,直接把屏幕显示样式和打印样式写在一个css文件中: 代码如下:@media print {}{ h1 { color: black; } h2 {}{ color: gray; } }
@media print里面...
1、程序说明1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印;2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容。2、代码部分
1) JS 函数:代码如下:function do_print(id_str)//id-str 打印区域的id{var el = document.getElementById(id_str);var iframe = document.createElement(IFRAME);var doc = null;iframe.setAttribute(style, position:absolute;width:0px;height:0px;l...
js或jquery实现页面打印(局部打印) 1、js实现(可实现局部打印) 代码如下: js打印 .noprint{display : none } 不需要打印的地方 <OBJECT id=wb height=0 width=0 classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb> 一按开始的减肥了卡时间段 3、jQuery实现(支持局部打印) 代码如下: $(function(){ $("input#biuuu_button").click(function(){ $("div#myPrintArea").printArea(); }); .....
最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件
用法:$("div#printmain").printArea();但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件中的属性参数。
PrintArea部分源码:var modes = { iframe : "iframe", popup : "popup" };
var defaults = { mode : modes.iframe,
popHt : 800,
popWd : 800,
popX : ...
html加如下代码function printSome(path){ //传入文件路径
$("#to_print").html('');
setTimeout(function(){$("#print_button").click();}, 500);
} web界面添加按钮调用js即可