JavaScript 实现打印操作
一.打印当前页面指定元素中的内容
方式一:直接使用window.print();
(1)首先获得元素的html内容(这里建议如果有样式最好是用内联样式的方式)
var newstr = document.getElementById(myDiv).innerHTML;//得到需要打印的元素HTML
(2)保存当前页面的整个html,因为window.print()打印操作是打印当前页的所有内容,所以先将当前页面保存起来,之后便于恢复。
var oldstr = document.body.innerHTML;//保存当前页面的HTML
(3)把当前页面替换为打印内容HTML
document.body.innerHTML = newstr;
(4)执行打印操作
window.print();
(5)还原当前页面
document.body.innerHTML = oldstr;
方法例:
//myDiv为需要打印的元素ID
function printpage(myDiv){
var newstr = document.getElementById(myDiv).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = newstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
方式二:window.open("",..)新开浏览器对话框打印。
(1)获得需要打印的元素HTML
var printHtml = document.getElementById("myDiv").innerHTML;//这个元素的样式需要用内联方式,不然在新开打印对话框中没有样式
(2)打开一个窗口,且内容设置为空。
var wind = window.open("",'newwindow', 'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');
(3)将新窗口内容填充为需要打印的HTML内容
wind.document.body.innerHTML = printHtml;
(4)打印
wind.print();
方法例:
//myDiv为需要打印的元素ID
function printpage(myDiv){
var printHtml = document.getElementById(myDiv).innerHTML;
var wind = window.open("",'newwindow', 'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');
wind.document.body.innerHTML = printHtml;
wind.print();
return false;
}
二、打印通过url获取的内容
直接使用
var wind = window.open(url,'newwindow', 'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');
wind.print();
对方url返回的所有内容都会被打印,,,如果知道需要打印指定内容的ID,可以先将页面获取到,然后通过一、中的方式打印。
即可打印;
三、功能实现总结
我做这个打印是为了打印一个面单就像包裹上面贴的,有收寄信息,公司log图片,
1.经过测试,如果使用火狐浏览器,有可能图片会变模糊(不排除是因为我操作方法没对),但是同样的操作在其他浏览器,比如google没有出现。(有些差异,用不同浏览器执行即可看出)
2.如果页面是自己系统直接打印还好。如果是为了给别人提供接口,让对方获得页面内容而打印,那么,页面中的路径一定要带http前缀,不然在对方域名下就没有对应图片。
3.打印有可能有页眉页脚,这个解决方法是 换合适的浏览器,比如google调用打印的时候就没有页眉页脚,遨游浏览器提供了显示选择。
3.尺寸不对应,因为页面是用像素布局,而打印是用的毫米之类的单位,这个是没法进行换算的,跟显示器有关,但是我们只要控制好整体长宽比就好,具体大小就无所谓了。然后打印时,比如遨游浏览器,就可以设置打印比例(其他浏览器应该都可以)。根据实际需求调整即可。
其他疑问:
1.有更好的方式比如有个 css的打印媒体类型(这个我不太懂,也没多了解)等更好的解决前端打印需求的,还请多多交流补充。
2.是否可以通过JS直接控制打印比例,和打印的页面去留。(我没有找到合适有效的方法)
转载于:https://www.cnblogs.com/potatog/p/7412905.html
JavaScript 实现打印操作相关推荐
- 第一百二十六节,JavaScript,XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...
- Javascript核心DOM操作 学习笔记
DOM .BOM Day01 DOM 1.web APIs和JS基础关联性 1.1 JS的组成 1.2 JS基础阶段以及Web APIs阶段 2.API和Web APIs 2.1 API 2.2 We ...
- Javascript Tip(1) 操作剪贴板
javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器 javascript可以使用window.clipboardData对象处理剪贴板内容 保存到剪贴板的方法 setData ...
- php 命令执行crud_如何使用原始JavaScript执行CRUD操作
php 命令执行crud by Zafar Saleem 通过Zafar Saleem 如何使用原始JavaScript执行CRUD操作 (How to perform CRUD operations ...
- Asp.net 的网络打印 – Javascript 控制打印
Asp.net 的网络打印 – Javascript 控制打印 ---资料来源于Microsfot WebCast. 1. 采用Javascript 控制打印: - 先写 ...
- 通过JavaScript简单的操作DOM(一)
通过JavaScript简单的操作DOM (一)简单的前提概念 1.DOM简介 DOM,文档对象模型.描述了HTML和XML文档结构,然后提供API,来帮助开发人员添加.删除.修改页面的某一部分. ( ...
- JavaScript常见集合操作
JavaScript常见集合操作 集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高 缺点:无法遍历对象 for(let i=0;i<array.le ...
- SAP打印机原理、打印配置及打印操作
一.SAP打印原理 SAP的打印过程分两个步骤: 创建假脱机请求 创建输出请求 在点击打印按钮后,系统会提示创建假脱机请求后,你可以选择直接生成输出请求,或者手动生成输出请求,产生输出请求后,系统会 ...
- 在Web中如何运用JavaScript实现打印功能
<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>< ...
最新文章
- python3环境搭建(利用Anaconda+pycharm+pytorch)
- 【Java基础】容器
- centos7 python3.6升级到3.7_Centos7下把python 2.7升级到python 3.6(升级过程遇到的一些相关问题)...
- 实例Python处理XML文件的方法
- 俄罗斯:自由软件在这里生根
- 在linux上执行.net Console apps
- [Effective C++读书笔记]003_条款03_尽可能使用const
- ubuntu12.04中安装SVN记录
- SQL2008,SQL2005存储过程解密
- [滤镜]的firefox兼容问题
- 改进3D/2D U-NET--添加深度监督deep supervision【Keras】
- 【开箱】索尼A6000微单入手
- 何谓自顶向下,何谓自底向上
- flowplayer
- recv函数linux,linux 下调用recv函数,死循环在recv函数里面,什么原因?
- matplotlib画小米新LOGO
- 张博涵清华大学_清华大学人文学院
- 【JZOJ2867】Contra
- stackoverflow无法注册解决方案
- MAC的OS系统损坏情况下,U盘启动安装win10系统
热门文章
- 软工个人项目作业——论文查重系统
- 【第一章】 jQuery入门---选择器 and $工具属性CSS
- python爬虫爬取qq空间说说_用python爬取qq空间说说
- 全国各地级市国有土地出让价款数据 (2004-2017年)
- Linux查看磁盘空间大小的命令
- 名人问题/名流问题/Celebrity
- java在表格单元中加入button按钮_java – 在表中实现一个按钮,该按钮使用Th...
- 论坛介绍 | COSCon'22 开源教育(E)
- 金软图像到PDF转换器
- 已发邮件修改邮件内容