js灵活打印web页面区域内容的通用方法
我们做网站，经常需要打印页面指定区域的内容，而网上关于这块的说法很多，各种各样的打印控件也不少。但许多打印方案都不怎么好，至少我不喜欢，要么封装复杂，要么难以维护。正好现在的项目也需要用到页面打印，于是在网上找了一个最简洁的打印插件，在它的基础上自己写了一个通用的打印方法，可以直观的修改样式。现在把代码贴出来，留置后用，也可以给大家一些参考。
通过这次试水，才知道，原来html中，media元素大有用途，这里正好小用一把，去掉超链接的url显示
1.网上找的js打印插件
/*
* Version 2.4.0 Copyright (C) 2013
* Tested in IE 11, FF 28.0 and Chrome 33.0.1750.154
* No official support for other browsers, but will TRY to accommodate challenges in other browsers.
* Example:
* Print Button: <div id="print_button">Print</div>
* Print Area : <div class="PrintArea" id="MyId" class="MyClass"> ... html ... </div>
* Javascript : <script>
* $("div#print_button").click(function(){
* $("div.PrintArea").printArea( [OPTIONS] );
* });
* </script>
* options are passed as json (example: {mode: "popup", popClose: false})
*
* {OPTIONS} | [type] | (default), values | Explanation
* --------- | --------- | ---------------------- | -----------
* @mode | [string] | (iframe),popup | printable window is either iframe or browser popup
* @popHt | [number] | (500) | popup window height
* @popWd | [number] | (400) | popup window width
* @popX | [number] | (500) | popup window screen X position
* @popY | [number] | (500) | popup window screen Y position
* @popTitle | [string] | ('') | popup window title element
* @popClose | [boolean] | (false),true | popup window close after printing
* @extraCss | [string] | ('') | comma separated list of extra css to include
* @retainAttr | [string[]] | ["id","class","style"] | string array of attributes to retain for the containment area. (ie: id, style, class)
* @standard | [string] | strict, loose, (html5) | Only for popup. For html 4.01, strict or loose document standard, or html 5 standard
* @extraHead | [string] | ('') | comma separated list of extra elements to be appended to the head tag
*/
(function($) {
var counter = 0;
var modes = { iframe : "iframe", popup : "popup" };
var standards = { strict : "strict", loose : "loose", html5 : "html5" };
var defaults = {
mode : modes.iframe,
standard : standards.html5,
popHt : 500,
popWd : 400,
popX : 200,
popY : 200,
popTitle : '',
popClose : false,
extraCss : '',
extraHead : '',
retainAttr: ["id", "class", "style"]
};
var settings = {};//global settings
$.fn.printArea = function( options )
{
$.extend( settings, defaults, options );
counter++;
var idPrefix = "printArea_";
$( "[id^=" + idPrefix + "]" ).remove();
settings.id = idPrefix + counter;
var $printSource = $(this);
var PrintAreaWindow = PrintArea.getPrintWindow();
PrintArea.write( PrintAreaWindow.doc, $printSource );
setTimeout( function () { PrintArea.print( PrintAreaWindow ); }, 1000 );
}; var PrintArea = {
print : function( PAWindow ) {
var paWindow = PAWindow.win;
$(PAWindow.doc).ready(function(){
paWindow.focus();
paWindow.print();
if ( settings.mode == modes.popup && settings.popClose )
setTimeout(function() { paWindow.close(); }, 2000);
});
},
write : function ( PADocument, $ele ) {
PADocument.open();
PADocument.write( PrintArea.docType() + "<html>" + PrintArea.getHead() + PrintArea.getBody( $ele ) + "</html>" );
PADocument.close();
},
docType : function() {
if ( settings.mode == modes.iframe ) return ""; if ( settings.standard == standards.html5 ) return "<!DOCTYPE html>"; var transitional = settings.standard == standards.loose ? " Transitional" : "";
var dtd = settings.standard == standards.loose ? "loose" : "strict";
return '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01' + transitional + '//EN" "http://www.w3.org/TR/html4/' + dtd + '.dtd">';
},
getHead : function() {
var extraHead = "";
var links = "";
var styles = ''; if ( settings.extraHead ) settings.extraHead.replace( /([^,]+)/g, function(m){ extraHead += m });
$(document).find("link")
.filter(function () { // Requirement: <link> element MUST have rel="stylesheet" to be considered in print document
var relAttr = $(this).attr("rel");
return ($.type(relAttr) === 'undefined') == false && relAttr.toLowerCase() == 'stylesheet';
})
.filter(function () { // Include if media is undefined, empty, print or all
var mediaAttr = $(this).attr("media");
return $.type(mediaAttr) === 'undefined' || mediaAttr == "" || mediaAttr.toLowerCase() == 'print' || mediaAttr.toLowerCase() == 'all'
})
.each(function () {
links += '<link type="text/css" rel="stylesheet" media="print" href="' + $(this).attr("href") + '" />';
styles += '@import url("' + $(this).attr("href") + '") print;';
});
if ( settings.extraCss ) settings.extraCss.replace( /([^,\s]+)/g, function(m){ links += '<link type="text/css" rel="stylesheet" href="' + m + '">' });
return '<head><title>' + settings.popTitle + '</title>' + extraHead + links + '<style type="text/css"> @media print{a:link:after {content: ""}}</style></head>';
//return "<head><title>" + settings.popTitle + "</title>" + extraHead + links + "</head>";
},
getBody : function ( elements ) {
var htm = "";
var attrs = settings.retainAttr;
elements.each(function() {
var ele = PrintArea.getFormData( $(this) );
var attributes = ""
for ( var x = 0; x < attrs.length; x++ )
{
var eleAttr = $(ele).attr( attrs[x] );
if ( eleAttr ) attributes += (attributes.length > 0 ? " ":"") + attrs[x] + "='" + eleAttr + "'";
}
htm += '<div ' + attributes + '>' + $(ele).html() + '</div>';
});
return "<body>" + htm + "</body>";
},
getFormData : function ( ele ) {
var copy = ele.clone();
var copiedInputs = $("input,select,textarea", copy);
$("input,select,textarea", ele).each(function( i ){
var typeInput = $(this).attr("type");
if ($.type(typeInput) === 'undefined') typeInput = $(this).is("select") ? "select" : $(this).is("textarea") ? "textarea" : "";
var copiedInput = copiedInputs.eq( i );
if ( typeInput == "radio" || typeInput == "checkbox" ) copiedInput.attr( "checked", $(this).is(":checked") );
else if ( typeInput == "text" ) copiedInput.attr( "value", $(this).val() );
else if ( typeInput == "select" )
$(this).find( "option" ).each( function( i ) {
if ( $(this).is(":selected") ) $("option", copiedInput).eq( i ).attr( "selected", true );
});
else if ( typeInput == "textarea" ) copiedInput.text( $(this).val() );
});
return copy;
},
getPrintWindow : function () {
switch ( settings.mode )
{
case modes.iframe :
var f = new PrintArea.Iframe();
return { win : f.contentWindow || f, doc : f.doc };
case modes.popup :
var p = new PrintArea.Popup();
return { win : p, doc : p.doc };
}
},
Iframe : function () {
var frameId = settings.id;
var iframeStyle = 'border:0;position:absolute;width:0px;height:0px;right:0px;top:0px;';
var iframe;
try
{
iframe = document.createElement('iframe');
document.body.appendChild(iframe);
$(iframe).attr({ style: iframeStyle, id: frameId, src: "#" + new Date().getTime() });
iframe.doc = null;
iframe.doc = iframe.contentDocument ? iframe.contentDocument : ( iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
}
catch( e ) { throw e + ". iframes may not be supported in this browser."; }
if ( iframe.doc == null ) throw "Cannot find document.";
return iframe;
},
Popup : function () {
var windowAttr = "location=yes,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no";
windowAttr += ",width=" + settings.popWd + ",height=" + settings.popHt;
windowAttr += ",resizable=yes,screenX=" + settings.popX + ",screenY=" + settings.popY + ",personalbar=no,scrollbars=yes";
var newWin = window.open( "", "_blank", windowAttr );
newWin.doc = newWin.document;
return newWin;
}
};
})(jQuery);
2. 我的调用方法
function printArticle(areaId) {
var styles = ".PrintStyleBtn{border:none;width:100%;;height:40px;line-height:40px;background-color:#eee;} .PrintStyleBtn input{ border-radius:5px;background-color:#999;color:#fff;float:right;margin:8px;height:24px;line-height:16px;padding:0px 5px;}.selected{background-color:#ccc;} .PrintStyleBtn span{margin:3px 0px;display:inline-block;border-radius:3px;height:24px;line-height:20px;padding:2px 5px;}.PrintStyleBtn span:hover{background-color:#999;} .print_content{border:1px solid #ddd;width:800px;height:auto;padding:20px;margin:50px auto;}";
insertStyleSheet(styles, "PrintStyle");
var printFrameHtml =
'<div id="PrintFrame" style="border:none;width:100%;height:100%;position:absolute;top:0;left:0;background-color:#fff;">'
+ '<div class="PrintStyleBtn" style="">'
+ ' Font size:'
+ ' <span name="size">Small</span> |'
+ ' <span name="size" class="selected">Medium</span> |'
+ ' <span name="size">Large</span> '
+ ' Line spacing:'
+ ' <span name="space">Compact</span> |'
+ ' <span name="space" class="selected">Normal</span> '
+ ' Image:'
+ ' <span name="image" class="selected">Yes</span> |'
+ ' <span name="image">No</span> '
+ ' <input id="btnCancel" type="button" value="Cancel"/>'
+ ' <input id="btnPrint" type="button" value="Print" />'
+ '</div>'
+ '<div class="print_content">' + $('#' + areaId).html() + '</div></div>';
$("body").append(printFrameHtml);
$('.print_content').find(".viva-content-edit").remove();
$('.PrintStyleBtn').find('span').on('click', function () {
var obj = $(this),
name = obj.attr('name'),
value = obj.html();
$('.PrintStyleBtn').find('span[name="' + name + '"]').removeClass('selected');
obj.addClass('selected');
if (name == 'size')
$('.print_content').css('font-size', value == 'Small' ? 'small' : value == 'Medium' ? 'medium' : 'large' );
if (name == 'space')
$('.print_content').css('line-height', value == 'Compact' ? '1' : 'normal');
if (name == 'image') {
if (value == "Yes") {
$('.print_content').find("img").show();
} else {
$('.print_content').find("img").hide();
}
}
});
$('.PrintStyleBtn').find('input').on('click', function () {
if (this.value == 'Print') {
$('.print_content').printArea();
}
$('#PrintFrame').remove();
});
}
3.附带页面sample
<input type="button" onclick="printArticle('articleRight');" value='Print' />
<div id="articleRight">
<div class="article-title">Test Article Tilte</div>
<div class="article-content">Test Article Content</div>
</div>
js灵活打印web页面区域内容的通用方法的更多相关文章
- js打印WEB页面内容代码大全
第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="tex ...
- 打印web页面指定区域的三种方法
本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...
- js打印div指定区域内容
<script> function myPrint(obj){ var newWindow=window.open("打印窗口","_blank") ...
- PHP关于web页面交互内容
学php学了有一段时间了总结总结给大家分享一下 PHP中的引用 第一段程序: <?php $first_name="firstName"; $first=&$firs ...
- WEB页面下载内容导出excel
internal class DownloadHandler : IDownloadHandler { public DownloadHandler() { ...
- 论一种基于JS技术的WEB前端动态生成框图的方法
前言 HTML是一种标记语言,由HTML的标签元素和文本编写的文档可被浏览器描述为一幅网页.通常情况下网页的实现是由HTML.CSS和Javascript三者结合完成的,HTML负责网页的结构,CSS ...
- 【原】移动web页面给用户发送邮件的方法 (邮件含文本、图片、链接)
微信商户通有这么一个需求,用户打开H5页面后,引导用户到电脑下载设计资源包,由于各种内部原因,被告知无后台资源支持,自己折腾了一段时间找了下面2个办法,简单做下笔记. 使用mailto功能,让用户自己 ...
- 移动web页面给用户发送邮件的方法
微信商户通有这么一个需求,用户打开H5页面后,引导用户到电脑下载设计资源包,由于各种内部原因,被告知无后台资源支持,自己折腾了一段时间找了下面2个办法,简单做下笔记. 使用mailto功能,让用户自己 ...
- js实现在当前页面搜索高亮显示字的方法
在html页面上,有时候会遇到一些检索高亮显示的问题,具体用js是实现的方式,代码展示. Jsp页面设置方式 <li class="pull-left" id="s ...
随机推荐
- C++宽窄字符串转换
首先,贴出我给出的解决方案: http://files.cnblogs.com/xuejianhui/utils.rar 再则,贴出网上最常见的例子: #include <string> ...
- js中的this指针（四）
当一个函数前面加上 new 操作符来调用,此时 this 会被绑定到新生成的对象上. 这既是所谓的构造函数调用模式.
- There is already an open DataReader associated with this Command which must be closed first." exception in Entity Framework
Fixing the "There is already an open DataReader associated with this Command which must be clos ...
- centos中开机时如何自启动samba服务器
解决办法如下:1.编辑rc.local文件#vi /etc/rc.d/rc.local2.加入如下启动命令/usr/sbin/apachectl start/etc/rc.d/init.d/mysql ...
- 解读(function($){...})(jQuery)
function(arg){...}这就定义了一个匿名函数,参数为arg 而调用函数 时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:(function(arg){.. ...
- java 线程数据同步
java 线程数据同步 由买票实例 //java线程实例 //线程数据同步 //卖票问题 //避免重复卖票 //线程 class xc1 implements Runnable{ //定义为静态,可以 ...
- nodejs-express 报错View is not a constructor
可能是express版本问题 view修改为views – app.set('views',__dirname + '/views');
- debian8(jessie)安装小记
其实上周五就想写这篇博客了,一直忙着没时间,虽然也不知道自己这一个星期到底在忙什么.这次我是彻底告别windows了,安装的过程略为艰辛,因为之前习惯了deepin和ubuntu的傻瓜式安装,而deb ...
- EXCL poi导入
public static void importExcel2(File file) throws Exception { InputStream is = new FileInputStream(f ...
- AX 4.0 调用打印设定的功能
PrintJobSettings printJobSettings; PrintJobSettings printJobSettings2; Boolean ok; container packPri ...