文档打印 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 ES6和ES5闭包的小demo
版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons) 可能有些小伙伴不知道ES6的写法,这儿先填写一个小例子 let conn ...
- 让 CXK 来教你实现游戏中的帧动画（上）
一款游戏除了基本功能之外,还需要给玩家更多视觉上的刺激,这个时候就需要用特效来装饰.本文就将介绍 Cocos Creator 的动画系统,除了标准的位移.旋转.缩放动画和序列帧动画以外,这套动画系统还 ...
- Java课堂 动手动脑5
1.了解棋盘打印:利用二维数组输出一个15*15的棋盘,棋盘的原素为“+”,就是输出一个横纵都是15个“+”的二维数组,然后再以坐标形式输入棋子“●”,替换掉原来棋盘里的“+”.再编写代码. 电脑随机 ...
- Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）
导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...
- Java 8 Stream实践
[**前面的话**]Java中的Stream于1.8版本析出,平时项目中也有用到,今天就系统的来实践一下.下面借用重庆力帆队伍中我个人比较喜欢的球员来操作一波,队员的年龄为了便于展示某些api做了调整 ...
- 转载 | textarea 在浏览器中固定大小和禁止拖动
HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 ...
- FLV协议5分钟入门浅析
FLV协议简介 FLV(Flash Video)是一种流媒体格式,因其体积小.协议相对简单,很快便流行开来,并得到广泛的支持. 常见的HTTP-FLV直播协议,就是使用HTTP流式传输通过FLV封装的 ...
- Gin + Vue全栈开发实战(一)
Gin入门 本章概要 Gin简介 开发第一个Gin程序 1.1 Gin简介 Gin是用Go语言编写的一个轻量级Web应用框架,现在在各个公司包括字节跳动.bilibili等大互联网公司都得到了广泛的应 ...
- JD面试 || 移除教室人数
在昨天参加了东哥的笔试,选择题做的还算可以,但是还有道编程题和关于jdk8的Stream特性难住了.鉴于此用博客总结一下这道编程题,并结合Stream特性来简化代码,熟悉Api. 题目描述 某校在积极 ...
- C++的精度控制
#include <iostream> #include <iomanip> using namespace std; int main( void ) { const dou ...