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

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

方式一：直接使用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直接控制打印比例，和打印的页面去留。（我没有找到合适有效的方法）

打印当前页面指定元素中的内容相关推荐

php遍历指定目录中的内容2
输出文件是否可读写,可执行,并同时输出创建时间,修改时间,访问时间 //2.遍历指定目录中的内容 if ($arr['file']) {$arrbyte = array("Byte" ...
使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的web应用...
在线演示本地下载如果你曾经开发过内容聚合类网站的话,使用程序动态整合来自不同页面或者网站内容的功能肯定对于你来说非常熟悉.通常使用java的话,我们都会使用到一些HTML的解析,例如,httpp ...
Java中从指定文本文件中读取内容，并显示到屏幕上。
[问题描述]从指定文本文件test.txt中读取内容,并显示到屏幕上. [输入形式]当前目录下的文本文件 test.txt ,内容可能如下: 在完成这个问题的过程中学到了很多,比如相对路径与绝对路径的 ...
html js设置文字垂直居中,javascript实现在指定元素中垂直水平居中
本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: #box{ width:200 ...
如何用JS局部刷新页面指定元素
刷新页内指定元素 window.location.reload("#id")
JS调用打印机打印页面指定元素
function doPrint(){var head_str = "<html><head><title></title></head ...
js在一个指定元素前添加内容_WebAR开发指南（1）---使用AR.js实现第一个WebAR demo...
前面有一篇文章万字干货介绍WebAR的实现与应用分析了目前流行的WebAR框架并简单的介绍一些实现方法,这个专栏我们具体的来通过一些框架实现WebAR效果. 关于AR.js AR.js是一个轻量级的 ...
php注册登录遍写入遍验证,在文件指定行中写入内容的php...-自动注册登录验证机制的php代...-php中出现Undefined index报错的修复方法_169IT.COM...
在phpwind站点后台添加"广告管家"(CNZZ的一款广告投放的应用)的应用,整个"广告管家"通过iframe载入,载入的具体内容根据不同站点显示针对该站点的 ...
php 替换指定标签中的内容,php如何根据不同的条件替换html代码中的img标签
这篇文章给大家介绍的内容是关于php根据不同的条件替换一段html代码中的不同的img标签,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.需求这次的需求是获取到一段html代码 ...

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

打印当前页面指定元素中的内容相关推荐

最新文章

热门文章