js实现自定义打印区域

使用 window.print() 方法可以实现页面的打印功能，但是这个方法打印的是当前整个页面。如果要想打印某一指定区域该怎么实现呢？

思路可以是：用想要打印的区域来替换页面内容。

1. 获取需要打印的区域。
2. 保存原页面body的内容。
3. 用需要打印的区域替换页面body内容。
4. 打印。
5. 还原页面。

var newStr = document.getElementsByClassName('printInnerHtml')[0].innerHTML; //获取打印内容
var pageStr = document.body.innerHTML; //保存原页面
document.body.innerHTML = newStr; //用打印区域替换原页面
window.print(); //打印
document.body.innerHTML = pageStr; //还原页面

如果打印区域是好几块内容的时候，可以使用字符串拼接。

var newStr = document.getElementsByClassName('printInnerHtml')[0].innerHTML; //获取打印内容

newStr += document.getElementsByClassName('printInnerHtml2')[0].innerHTML; //字符串拼接 需要打印的内容

var pageStr = document.body.innerHTML; //保存原页面
document.body.innerHTML = newStr; //用打印区域替换原页面
window.print(); //打印
document.body.innerHTML = pageStr; //还原页面