html 页面实现打印（jqprint）
很不错的 轻量打印 js 库
下载地址：
演示地址：
使用的一些问题：
出现Cannot read property ‘opera’ of undefined错误问题是juqery版本兼容问题
解决方法：加入迁移辅助插件jquery-migrate-1.0.0.js可解决版本问题
(上面的下载中包含这些文件)
src="js/jquery/jquery-migrate-1.2.1.min.js"&&
实际上是打印页面中的某个 html 下的所有元素。 所以打印的时候需要把这个元素调整到 打印的大小
如果是打印 A4
打印元素（最外层）widht:210height:297mm这样就刚好是A4大小。
（元素的 非行内样式会 忽略。打印的时候自带行内样式）
那么如何支持 css
&link media="print" rel="stylesheet" type="text/css" href="XXX.css"&
使用过程：
引用jquery和，jqprint到您的页面
language="javascript" src="jquery-1.4.4.min.js"&&
language="javascript" src="jquery.jqprint-0.3.js"&&
调用方方法：
language="javascript"&
$("#ddd").jqprint();
&input type="button" onclick=" a()" value="打印"/&
具体一点的参数：
$("#printContainer").jqprint({
//如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
debug: false,
//true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
importCSS: true,
//表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
printContainer: true,
//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
operaSupport: true
HTML打印方法总结
JQPRINT-不错的jquery打印插件
用JS在html页面实现打印功能
web打印实现几种方法
Jqprint 轻量级页面打印插件
HTML 页面打印
jqprint插件使用教程与源码实现分析
wed的各种前端打印方法（1）Jqprint
没有更多推荐了，网页中的局部打印问题， 急！！！！！_百度知道
网页中的局部打印问题， 急！！！！！
我只想打印页面中的一个table中内容 怎么实现 是小票打印。
这是一个触摸屏程序 不要页眉页脚 点击打印后要求就直接打印 成功后 还会加分。急！！！！ 谢了
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
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); //从开始代码向后取htmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取htmlwindow.document.body.innerHTML=window.print();window.document.body.innerHTML=} else {window.print();}}使用很简单 将页面内要打印的内容加入中间&!--startprint1--&XXXXX&!--endprint1--&再加个打印按纽 onclick=preview(1)
采纳率：28%
function window.onbeforeprint()...{
//将一些不需要打印的隐藏
//如：document.getElementById(&div1&).style.display=&none&;}function window.onafterprint()...{
//放开隐藏的元素
//如：document.getElementById(&div1&).style.display=&none&;}还有两种方法JS实现局部打印和预览：第一种：JS 实现简单的页面局部打印 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); //从开始代码向后取htmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取htmlwindow.document.body.innerHTML=window.print();window.document.body.innerHTML=} else ......{window.print();}}使用很简单 将页面内要打印的内容加入中间&!--startprint1--&XXXXX&!--endprint1--&再加个打印按纽 onclick=preview(1) 第二中：组件法WebBrowser是IE内置的浏览器控件，无需用户下载.一、WebBrowser控件
&object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:A-11D0-A96B-00C04FD705A2'&&/object& 二、WebBrowder控件的方法 //打印 WebBrowser1.ExecWB(6,1); //打印设置 WebBrowser1.ExecWB(8,1); //打印预览 WebBrowser1.ExecWB(7,1); 关于这个组件还有其他的用法，列举如下： WebBrowser.ExecWB(1,1) 打开 Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口 Web.ExecWB(4,1) 保存网页 Web.ExecWB(6,1) 打印 Web.ExecWB(7,1) 打印预览 Web.ExecWB(8,1) 打印页面设置 Web.ExecWB(10,1) 查看页面属性 Web.ExecWB(15,1) 好像是撤销，有待确认 Web.ExecWB(17,1) 全选 Web.ExecWB(22,1) 刷新 Web.ExecWB(45,1) 关闭窗体无提示 但是打印是会把整个页面都打印出来的,页面里面有什么东西就打印出来,我们有时候只需要打印数据表格,这时我们就要写一个样式了:把不想打印的部份隐藏起来：样式内容：&style type=&text/css& media=print&.noprint......{display : none }&/style&然后使用样式就可以：&p class=&noprint&&不需要打印的地方&/p&代码如下:&script language=&javascript&& function printsetup()......{ // 打印页面设置 wb.execwb(8,1); } function printpreview()......{ // 打印页面预览 wb.execwb(7,1); } function printit() ......{ if (confirm('确定打印吗？')) ......{ wb.execwb(6,6) } } &/script& &OBJECT classid=&CLSID:A-11D0-A96B-00C04FD705A2& height=0 id=wb name=wb width=0&&/OBJECT& &input type=button name=button_print value=&打印& class=&noprint& onclick=&javascript:printit()&& &input type=button name=button_setup value=&打印页面设置& class=&noprint& onclick=&javascript:printsetup();&& &input type=button name=button_show value=&打印预览& class=&noprint& onclick=&javascript:printpreview();&&
1右键按住 下划选择需要打印的内容 然后松开右键2在选择完的内容上右键选择“打印”，然后选择打印机就OK
用qq的图片剪切好了！存为图片在打印！呵呵！
其他1条回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。This has been driving me mad all day. I at first went down the print settings route before realising that it's the "Print background colors and images" option in IE that's been tripping me up.
The last test case code I used:
&style type="text/css"&body{font-family:C}pre{display:}&/style&
&b&&font color="#FFFF00"&this is a test&/font&&/b&&br/&
When viewed in IE "this is a test" is displayed in bright yellow. However when printing or even print previewing it's rendered in what I'd describe as a muddy yellow. The same is true if I export to PDF via virtual PDF printer. If I enable "Print background colors and images" the correct yellow is used, but I understand from what I've read this option can't be set programmatically.
It's not just yellow, many similar colors end up the same as each other in the print preview, and I need to shade things according to error margin so can't just use ones that are very different.
So how to get round this??? I don't see why a setting for background colors is affecting foreground text like this (unless I can force foreground it? My HTML is only very basic and hasn't been used for a few years ...)
Cheers for any help
解决方案 Try this css media query:
@media print {
/*put your styles here*/
I'm not sure if IE supports it though. I'm not sure what versions your dealing with.
本文地址： &
这一直让我疯了一整天。我第一次走下打印设置路线，然后意识到这是IE中的“打印背景颜色和图像”选项，已经困扰我了。
最后一个测试用例代码我使用了：
& html& & style type =“text / css”& body {font-family：C} pre {display：}& / style& & body& & b&& font color =“＃FFFF00”&这是一个测试& / font&& / b&& br / & / body& & / html&
在IE中查看时，“这是测试”显示为亮黄色。然而，当打印甚至打印预览它被呈现在我所描述的泥泞的黄色。如果我通过虚拟PDF打印机导出到PDF也是如此。如果我启用了“打印背景颜色和图片”，则使用正确的黄色，但是从我所阅读的内容来看，此选项不能以编程方式设置。
不仅仅是黄色，许多相似的颜色在打印预览中最终会相同，我需要根据错误容限来遮挡事物，所以不能只使用非常不同的事物。
那么如何获得这个???我不明白为什么背景颜色的设置影响前景文本像这样（除非我可以强制前台它？我的HTML只是非常基本的，没有使用几年...）
欢迎任何帮助
解决方案 尝试此css媒体查询：
@media print { body { / *将您的样式放在这里* / }
我不知道IE是否支持。我不知道你处理的是什么版本。
本文地址： &
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ，选择关注
与百万开发者在一起
(window.slotbydup = window.slotbydup || []).push({
id: '5828425',
container: s,
size: '300,250',
display: 'inlay-fix'利用jqprint插件打印页面内容的实现方法
转载 &更新时间：日 09:04:56 & 作者：彩虹的夜晚
qprint是一个基于jquery编写的页面打印的一个小插件，但是不得不承认这个插件确实很厉害，下面这篇文章主要给大家介绍了关于利用jqprint插件如何打印页面内容的实现方法，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
客户需要在页面有一个打印按钮，点击之后可以打印Echarts图表的内容以及文字提示信息，经谷歌搜索发现，实现方法大概有三种之多，其他两种不太熟悉，而采用的这种打印方式是一个在jQuery的基本上开发的一个print插件，因此可以使用jQuery的方式查找元素，因此决定采用这种方式。
先看一下实现的效果图，如下：
实现效果图
引入js文件
&script type="text/javascript" src="__JS__/jquery-migrate-1.2.1.min.js"&&/script&
&script type="text/javascript" src="__JS__/jqprint-0.3.js"&&/script&
注意：这里是先引入的jQuery文件，如果没有引入第一个js文件的话，会出现兼容性问题，导致使用jqprint打印时报错。
这里面的html标签很多的
&div class="wrap-content container" id="container"&
&table border="0" cellpadding="0" cellspacing="0" class="store-joinin baseinfo"&
&th colspan="40"&用户信息&/th&
&tr style="background: rgb(255, 255, 255);"&
&th&姓名：&/th&
&td colspan="40"&&/td&
&tr style="background: rgb(255, 255, 255);"&
&th&性别：&/th&
&td colspan="40"&男&/td&
&tr style="background: rgb(255, 255, 255);"&
&th&年龄：&/th&
&td colspan="40"&41&/td&
&tr style="background: rgb(255, 255, 255);"&
&th&身份证：&/th&
&td colspan="40"&01059X&/td&
&tr style="background: rgb(255, 255, 255);"&
&th&所属机构：&/th&
&td colspan="40"&上海市政法委&/td&
&button class="btn btn-danger printBtn1" onclick="btnPrintClick()" type="button"&打 印&/button&
当然下面还有很多的html标签，在这里就不展示了。
打印按钮点击之后执行的函数
function btnPrintClick(){
var imgBox = $('#img_box');
var chartBox = $('#main');
if (imgBox.length &= 0) {
chartBox.after('&div id="img_box"&&/div&');
imgBox = $('#img_box');
// 将echart生成图片并放入img-box，并显示图片img-box
imgBox.html('& img src="' + myChart.getDataURL() + '"/&').css('display','block');
// 隐藏echart图chart-box
chartBox.css('display','none');
// 调整img大小
var img = imgBox.find('img');
var imgWidth = img.width();
var showWidth = 1000; // 显示宽度，即图片缩小到的宽度
if (imgWidth & showWidth) { // 只有当图片大了才缩小
var imgNewHeight = img.height() / (imgWidth / showWidth);
img.css({'width': showWidth + 'px', 'height': imgNewHeight + 'px'});
var imgBox2 = $('#img_box2');
var chartBox2 = $('#main2');
if (imgBox2.length &= 0) {
chartBox2.after('&div id="img_box2"&&/div&');
imgBox2 = $('#img_box2');
// 将echart生成图片并放入img-box，并显示图片img-box
imgBox2.html('& img src="' + myChart2.getDataURL() + '"/&').css('display','block');
// 隐藏echart图chart-box
chartBox2.css('display','none');
// 调整img大小
var img2 = imgBox2.find('img');
var img2Width = img2.width();
var show2Width = 1000; // 显示宽度，即图片缩小到的宽度
if (img2Width & show2Width) { // 只有当图片大了才缩小
var img2NewHeight = img2.height() / (img2Width / show2Width);
img2.css({'width': show2Width + 'px', 'height': img2NewHeight + 'px'});
$("#TestQuestions").jqprint();
// 执行打印后再切换回来
// 显示echart图chart-box
chartBox.css('display','block');
chartBox2.css('display','block');
// 隐藏图片img-box
imgBox.css('display','none');
imgBox2.css('display','none');
注意事项：
这里使用了图片的缩放比例的方式。比如Echarts图表要显示的内容特别多的话，一般在html页面中采用的是在X轴上使用滚动条的方式，但是打印时可以将Echarts图表先转换成图片，并等比例进行缩放，打印完毕之后再还原回来即可。
任何不需要打印的标签都可以先隐藏。对于不需要出现在打印页面的标签内容，我们在打印之前使用jQuery查找到对应的元素，将该元素隐藏起来，打印结束之后，再将隐藏的元素显示出来即可。
debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
operaSupport: false //表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具java打印html
<a data-traceid="question_detail_above_text_l&&
数据库存了html字符串
如何保留格式打印出内容
openoffice
--- 共有 1 条评论 ---