关于js方法打印指定区域

最新推荐文章于 2024-06-13 16:32:57 发布

philip421421

最新推荐文章于 2024-06-13 16:32:57 发布

阅读量964

点赞数 1

分类专栏： JavaScript 文章标签： IE HTML JavaScript ViewUI

本文链接：https://blog.csdn.net/philip421421/article/details/84587818

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近测试目前系统关于ie11的兼容性问题，发现以前的打印页面无法使用了，js报错？比较奇怪的事情，于是调试发现调用的公共方法代码有问题。

js中，打印页面有window.print()方法，也有document.execCommand('print')对象解析方式，还有WebBrowser控件方式来实现，但公共方法中却是obj.document.execCommand('print'，false)，让我一直以为这种方法可以打印指定标签对象，但IE11的报错使得我明白了，这样写是有问题的，只是IE以前的版本中的解析器将这种错误忽略了，而且这样的写法也是打印整个页面（因为是打开了一个新页面然后将需要打印的对象添加到新页面中，而造成了自己认为是打印指定对象的错觉）。为此，我需要重新找到实现方法打印指定区域。

1、当前页打印


function printObj(obj) {
  var newStr = obj.outerHTML;
  var oldStr = document.body.innerHTML;

  document.body.innerHTML = newStr;
  window.print();
  document.body.innerHTML = oldStr;
  return false;
}

这中方式是将当前页替换为打印页，打印完之后再替换回来，打印之前可以对打印页进行特殊操作，例如去掉表格中的页码等。这种方法貌似只能打印某一对象？想要打印任意区域，通过对oldStr进行截取与拼接，也是可以实现任意区域打印的。

2、新窗口打印


function printObj(obj) {
  var headStr = "<html><head><title></title></head><body>";  
  var footStr = "</body>";
  var newStr = obj.outerHTML;

  var newWindow=window.open("","_blank","k");
  newWindow.document.write(headStr+newStr+footStr);
  newWindow.print();
  newWindow.close();
  return false;  
}

当然，也可以请求一个存在的新页面，然后在新页面中处理


//父页面
function openPrintHtml() {
  document.form.target = '_blank';
  document.form.submit();
}

//子页面
function printObj(objName) {
  var obj = window.opener.document.getElementById(objName);
  document.body.appendChild(obj);
  window.print();
}

这样做的好处在于，你可以对打印的内容重定义样式等。

philip421421

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于js方法打印指定区域

最近测试目前系统关于ie11的兼容性问题，发现以前的打印页面无法使用了，js报错？比较奇怪的事情，于是调试发现调用的公共方法代码有问题。 js中，打印页面有window.print()方法，也有document.execCommand('print')对象解析方式，还有WebBrowser控件方式来实现，但公共方法中却是obj.document.execCommand...
复制链接

扫一扫