关于js方法打印指定区域

    最近测试目前系统关于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();
}


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

你可能感兴趣的:(JavaScript,html,IE)