javascript 打印页面指定 div 内容

分类 css 426阅读阅读模式

通过 js 控制打印指定 div ,有几种常见办法。

1、通过替换网页原内容为 div 内容

  1. function printdiv(obj) {
  2. var headstr = '<meta charset="utf-8" />'; // 预防中文字符乱码
  3. var printData = document.getElementById(obj).innerHTML; //获取 div 内容 - D
  4. var originalBody = document.body.innerHTML; // 获取页面内容 - O
  5. document.body.innerHTML = headstr + printData; // O -> D
  6. window.print(); // 打印
  7. document.body.innerHTML = originalBody;// D -> O
  8. return false;
  9. }

这种方法在打印时候,把网页内容替换为div 内容,打印完毕后替换回原理的网页。

 

2、新建弹窗插入指定 div 内容

  1. function printdiv(obj) {
  2. var printWindow = window.open(location.href, "_blank");
  3. var printData = document.getElementById(obj).innerHTML;
  4. printWindow.document.write(printData);
  5. printWindow.document.close();
  6. printWindow.print();
  7. printWindow.close();
  8. return false;
  9. }

这种方法在打印时候,新建一个窗口,把指定 div 放到窗口中去,并打印。

注:这种办法会导致CSS文件失效,也就是样式用不了CSS文件里面的,需要在页面每个元素上写内置样式。

 

3、CSS 控制打印时隐藏

放在页面头部

  1. <style type="text/css" media=print>
  2. .noprint{display : none }
  3. </style>

如果不想放在页面头部,下面这段放在 css 文件中,功能一样

  1. @media print{
  2. .noprint { display: none }
  3. }

这种方法在打印时候,在相应不需要打印的位置添加该类,然后直接执行 window.print(); 打印页面就行了。

 

完毕!

相关文章

给我留言

  • 有人回复时邮件通知我