文档打印 js print调用打印dom内容
1.首先按目前研究 print可以打印dom
2.被设置overflow：hidden 的模块，打印时会被截掉。
3.被设置成 display：none 的dom 打印不会有样式 边框等。
4.如果需要改变打印样式则需要css3媒体查询，并确保样式被加载到输出的dom中；
例如：
<style type="text/css">
@media print {
.showy>p{display:none;}
.cls{display:none;}
td {background-color: red; border:1px solid #333; }}
iframe{position:absolute;top:-100000px;left:-100000px;}
@page{
size: A4 landscape;
margin:1cm;
}
</style>
下面是完整的例子：
html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Print.js 演示</title>
<meta name="author" content="DH">
<link rel="stylesheet" href="files/comm.css" />
<style>
.wrap {
margin: 0 auto;
padding: 20px;
width: 640px;
border: 1px solid #ccc;
} .form .row {
padding: 10px 0 0;
} .btn {
display: block;
margin: 20px auto;
padding: 8px 16px;
}
html,body{margin:0;padding:0}
body{font-size:14px;color:#333} @page{
size: A4 landscape;
margin:1cm;
}
@media print{
body{-webkit-print-color-adjust:exact}
.showy{overflow-x:visible}
} .fr{float:right}
.vt{vertical-align:top}
</style>
</head>
<body>
<div id="wrap" class="wrap">
<div class="con">
<h1>萨摩耶犬</h1>
<p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p>
<h1>萨摩耶犬</h1>
<p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p>
<h1>萨摩耶犬</h1>
<p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p>
<h1>萨摩耶犬</h1>
<p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p> </div>
<button class="btn no-print" id="btn">打印</button>
</div>
<script src="files/Print.js"></script>
<script>
document.getElementById('btn').onclick = function () { Print('#wrap', {
onStart: function () {
console.log('onStart', new Date())
},
onEnd: function () {
console.log('onEnd', new Date())
}
}) }
</script>
</body>
</html>
js:
/* @Print.js
*/
(function (window, document) {
var Print = function (dom, options) {
if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({
noPrint: '.no-print',
onStart: function () { },
onEnd: function () { }
}, options); if ((typeof dom) === "string") {
this.dom = document.querySelector(dom);
} else {
this.dom = dom;
} this.init();
};
Print.prototype = {
init: function () {
var content = this.getStyle() + this.getHtml();
this.writeIframe(content);
},
extend: function (obj, obj2) {
for (var k in obj2) {
obj[k] = obj2[k];
}
return obj;
}, getStyle: function () {
var str = "",
styles = document.querySelectorAll('style,link');
for (var i = 0; i < styles.length; i++) {
str += styles[i].outerHTML;
}
str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>"; return str;
}, getHtml: function () {
var inputs = document.querySelectorAll('input');
var textareas = document.querySelectorAll('textarea');
var selects = document.querySelectorAll('select'); for (var k in inputs) {
if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
if (inputs[k].checked == true) {
inputs[k].setAttribute('checked', "checked")
} else {
inputs[k].removeAttribute('checked')
}
} else if (inputs[k].type == "text") {
inputs[k].setAttribute('value', inputs[k].value)
}
} for (var k2 in textareas) {
if (textareas[k2].type == 'textarea') {
textareas[k2].innerHTML = textareas[k2].value
}
} for (var k3 in selects) {
if (selects[k3].type == 'select-one') {
var child = selects[k3].children;
for (var i in child) {
if (child[i].tagName == 'OPTION') {
if (child[i].selected == true) {
child[i].setAttribute('selected', "selected")
} else {
child[i].removeAttribute('selected')
}
}
}
}
} return this.dom.outerHTML;
}, writeIframe: function (content) {
var w, doc, iframe = document.createElement('iframe'),
f = document.body.appendChild(iframe);
iframe.id = "myIframe";
iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;"; w = f.contentWindow || f.contentDocument;
doc = f.contentDocument || f.contentWindow.document;
doc.open();
doc.write(content);
doc.close();
this.toPrint(w, function () {
document.body.removeChild(iframe)
});
}, toPrint: function (w, cb) {
var _this = this;
w.onload = function () {
try {
setTimeout(function () {
w.focus();
typeof _this.options.onStart === 'function' && _this.options.onStart();
if (!w.document.execCommand('print', false, null)) {
w.print();
}
typeof _this.options.onEnd === 'function' && _this.options.onEnd();
w.close();
cb && cb()
});
} catch (err) {
console.log('err', err);
}
}
}
};
window.Print = Print;
}(window, document));
扩展阅读
https://cloud.tencent.com/developer/section/1072311
http://www.jq22.com/jquery-info15776
http://www.cokea.com
文档打印 js print调用打印dom内容的更多相关文章
- javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...
- C#通过调用WinApi打印PDF文档类，服务器PDF打印、IIS PDF打印
其他网站下载来的类,可以用于Winform.Asp.Net,用于服务器端PDF或其他文件打印. 直接上代码: using System; using System.Collections.Generi ...
- 生成二维码的js以及调用打印插件
插件: qrcode.js 插件下载网址:http://code.ciaoca.com/javascript/qrcode/ 用法实例: <script type="text/java ...
- 使用文档碎片（DocumentFragments）追加DOM元素
标签(空格分隔): JavaScript DocumentFragment接口表示一个没有父级文件的最小文档对象.它被当做一个轻量版的Document使用,用于存储已排好版的或尚未打理好格式XML片段 ...
- VS Code 中 HTML 文档注释 js 语句异常
今天用 VS Code 编辑 html 文档时,发现快捷键注释 js 代码显示成 “<!-- …… -->”,怀疑是不是因为安装了某个插件,随后排查出系 Jinja 所致,将其禁用之后就 ...
- HTML文档插入JS代码的几种方法
在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内联,放置在< script>和标签对之间. 2.放置在由< script>标签的src属性指定的外部文件中 ...
- Javascript样例之文档章节滚动全版（DOM）
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBMAAAC5CAIAAAD1bOCRAAAMEUlEQVR4nO3d4XEbyREGUGRCZQDGcG
- 文档的js
/* 主站,子频道,定向站点共用 */ (function() { scrollToAnchor(); toggleSearchForm(); scrollTop(); initScrollBar() ...
- java对word文档的操作（提取标题和内容等）-直接操作或poi工具包或freemarker+xml或html转word
1,java自带工具包实现对word的排版和写入 import java.awt.Color; import java.io.FileNotFoundException; import java.io ...
随机推荐
- JavaScript数据结构——栈的实现与应用
在计算机编程中,栈是一种很常见的数据结构,它遵从后进先出(LIFO——Last In First Out)原则,新添加或待删除的元素保存在栈的同一端,称作栈顶,另一端称作栈底.在栈中,新元素总是靠近栈 ...
- 不用 Spring Security 可否？试试这个小而美的安全框架
写在前面 在一款应用的整个生命周期,我们都会谈及该应用的数据安全问题.用户的合法性与数据的可见性是数据安全中非常重要的一部分.但是,一方面,不同的应用对于数据的合法性和可见性要求的维度与粒度都有所区别 ...
- postman->newman->jenkins构建过程的问题记录及解决方法
从postman导出请求集合后要做的工作: 需要调整导出的json文件,如配置环境变量{{host}},需要修改成准确的url; 通过newman执行newman run test_request.j ...
- 28岁，转行学 IT 靠谱吗？
前几天在知乎上,刷到这么一个问题 鉴于有不少人看了我的blog给我私信一些职业规划相关的问题,讨论很多的就是担心自己年龄是否还适合转行. 于是决定静心下来码了一篇回答, 同时搬到博客园来供大家消遣.. ...
- Spring基础笔记
Spring带给了我们什么便利? 注解版本的IOC如何玩? 组件注册 组件注册的过程中有哪些过滤规则? 如何控制组件的作用域(单例多例)? 六种注册组件的方式? 生命周期 什么是bean的生命周期 在 ...
- 当我们尝试用JavaScipt测网速
npm包地址 https://www.npmjs.com/package/network-speed-test Github地址 https://github.com/penghuwan/networ ...
- 世纪龙校招java开发一、二面 面经
头一天做的笔试,涉及到计组基本知识,还有几道智力题.java部分很简单(真的很简单有点基础就划过了) 第二天收简历 在隔壁教室等 叫到你 你就去面试 一面:先自我介绍 1 == 和 equals区别( ...
- Ubuntu Server : 自动更新
Ubuntu(16.04/18.04) 默认会每天自动安装系统的安全更新,但是不会自动安装包的更新.本文梳理 Ubuntu 16.04/18.04 系统的自动更新机制,并介绍如何配置系统自动更新所有的 ...
- 11.源码分析---SOFARPC数据透传是实现的？
先把栗子放上,让大家方便测试用: Service端 public static void main(String[] args) { ServerConfig serverConfig = new S ...
- Gradle 是什么
写在前面的话,最近在系统的学习Gradle,本来想写一篇关于 Gradle 的介绍. 但在官网发现了这篇关于 Gradle 的介绍,已经介绍的很好了,我就很直接翻译过来了. 原文地址 https:// ...