一.打印当前页面指定元素中的内容

方式一:直接使用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 实现打印操作相关推荐

  1. 第一百二十六节,JavaScript,XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  2. 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 ...

  3. Javascript Tip(1) 操作剪贴板

    javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器 javascript可以使用window.clipboardData对象处理剪贴板内容 保存到剪贴板的方法 setData ...

  4. php 命令执行crud_如何使用原始JavaScript执行CRUD操作

    php 命令执行crud by Zafar Saleem 通过Zafar Saleem 如何使用原始JavaScript执行CRUD操作 (How to perform CRUD operations ...

  5. Asp.net 的网络打印 – Javascript 控制打印

    Asp.net 的网络打印 – Javascript 控制打印 ---资料来源于Microsfot WebCast. 1.       采用Javascript 控制打印: -          先写 ...

  6. 通过JavaScript简单的操作DOM(一)

    通过JavaScript简单的操作DOM (一)简单的前提概念 1.DOM简介 DOM,文档对象模型.描述了HTML和XML文档结构,然后提供API,来帮助开发人员添加.删除.修改页面的某一部分. ( ...

  7. JavaScript常见集合操作

    JavaScript常见集合操作 集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高 缺点:无法遍历对象 for(let i=0;i<array.le ...

  8. SAP打印机原理、打印配置及打印操作

    一.SAP打印原理  SAP的打印过程分两个步骤: 创建假脱机请求 创建输出请求 在点击打印按钮后,系统会提示创建假脱机请求后,你可以选择直接生成输出请求,或者手动生成输出请求,产生输出请求后,系统会 ...

  9. 在Web中如何运用JavaScript实现打印功能

    <OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>< ...

最新文章

  1. python3环境搭建(利用Anaconda+pycharm+pytorch)
  2. 【Java基础】容器
  3. centos7 python3.6升级到3.7_Centos7下把python 2.7升级到python 3.6(升级过程遇到的一些相关问题)...
  4. 实例Python处理XML文件的方法
  5. 俄罗斯:自由软件在这里生根
  6. 在linux上执行.net Console apps
  7. [Effective C++读书笔记]003_条款03_尽可能使用const
  8. ubuntu12.04中安装SVN记录
  9. SQL2008,SQL2005存储过程解密
  10. [滤镜]的firefox兼容问题
  11. 改进3D/2D U-NET--添加深度监督deep supervision【Keras】
  12. 【开箱】索尼A6000微单入手
  13. 何谓自顶向下,何谓自底向上
  14. flowplayer
  15. recv函数linux,linux 下调用recv函数,死循环在recv函数里面,什么原因?
  16. matplotlib画小米新LOGO
  17. 张博涵清华大学_清华大学人文学院
  18. 【JZOJ2867】Contra
  19. stackoverflow无法注册解决方案
  20. MAC的OS系统损坏情况下,U盘启动安装win10系统

热门文章

  1. 软工个人项目作业——论文查重系统
  2. 【第一章】 jQuery入门---选择器 and $工具属性CSS
  3. python爬虫爬取qq空间说说_用python爬取qq空间说说
  4. 全国各地级市国有土地出让价款数据 (2004-2017年)
  5. Linux查看磁盘空间大小的命令
  6. 名人问题/名流问题/Celebrity
  7. java在表格单元中加入button按钮_java – 在表中实现一个按钮,该按钮使用Th...
  8. 论坛介绍 | COSCon'22 开源教育(E)
  9. 金软图像到PDF转换器
  10. 已发邮件修改邮件内容