文档打印 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 ...
随机推荐
- 夯实Java基础（七）——Static关键字
1.static介绍 static关键字一直是各大企业中面试常常会问到的问题,主要考察面试者的基础是否扎实,下面来介绍一下static关键字. Java中static表示“全局”或者“静态”的意思,可 ...
- Python - 自学django，上线一套资产管理系统
一.概述 终于把公司的资产管理网站写完,并通过测试,然后上线.期间包括看视频学习.自己写前后端代码,用时两个多月.现将一些体会记录下来,希望能帮到想学django做web开发的人.大牛可以不用看了,小 ...
- JAVA基础知识（二）：List接口、ArrayList类和LinkedList类
List接口继承了Collection接口,位于java.util包中.它包含Collection接口的所有方法,外加其他一些方法(具体实现参考源码),比较重要的有: anyType get(int ...
- strstr函数使用中的一个错误解决
最近使用ESP8266的时候,联网的过程中需要使用strstr函数来读取串口发来的某些重要信息, 使用strstr函数发现某些时候能够正常返回需要寻找的字符串的指针,有些时候找不到,后来发现原来是这样 ...
- struts的上传下载
文件上传 添加jar包 commons-io-1.3.2.jar commons-fileupload-1.2.1.jar 前台页面 form表单 method值为post 添加"encty ...
- C++学习想法
今天是周一,今天做早操的时候舍友说准备买一本C++基础的书.我觉得这样的想法很好,突然想到自己最近几天因为自己私人原因事情很忙,蛋这不能成为我不学C++的理由.所以我在这规划了我这一周的学习进程.首先 ...
- 测试自动化：java+selenium3 UI自动化（2） - 启动Firefox
1. selenium和浏览器 基于selenium的这套自动化体系,其实现关键就在于对于各浏览器的顺畅操作. 事实上当selenium刚开始起家的时候,他使用的还是javascript注入的方式来驱 ...
- 存在于文件名中的SQL手工注入
SQL注入已经在前一章为大家介绍了个大概,本文将讲述我遇到的本以为是文件上传漏洞,却是以文件名触发的SQL注入! 本文分享的内容同样来自于一道CTF题! 1. 直接进入正题 (1) 初步探测 先看一下 ...
- 用 程序 解决 windows防火墙 的 弹窗 问题
今天用户反馈了一个问题,运行程序弹了个框 这个只有程序第一次运行会出来,之后就不会了. 当然改个程序名字,又会弹出来. 强烈怀疑是写到了注册表,果然被我找到了. “HKEY_LOCAL_MACHINE ...
- reponse.addHeader中文名字乱码