[js] 第137天 用js实现页面局部打印和预览原理是什么呢？同时在IE上有什么不同？

[haizhilin2013]

第137天 用js实现页面局部打印和预览原理是什么呢？同时在IE上有什么不同？

[bowencool]

#print {
  display: none !important;
}
@media print {
  body > * {
    display: none;
  }
  #print {
    display: block!important;
  }
}

以React为例封装一个PrintContainer

import ReactDOM from 'react-dom'
const div = document.createElement('div')
div.id = 'print'
document.body.appendChild(div)

export default function PrintContainer (props) {
  return ReactDOM.createPortal(props.children, div)
}

[xiaotianxia]

@media print {
    *:not(.somedom) {
         display: none;
    }
}

这样吗

[bowencool]

@media print {
    *:not(.somedom) {
         display: none;
    }
}

这样吗

这样写的话.somedom的子元素也不见了吧？😰

[xiaotianxia]

@media print {
    *:not(.somedom) {
         display: none;
    }
}

这样吗

这样写的话.somedom的子元素也不见了吧？😰

是哦 是我草率了:grin:

[censek]

<h1>这块内容不需要打印1</h1>
<!--startprint-->
<div class="content">
    这里是需要打印的内容
    .....
</div>
<!--endprint-->
<h1>这块内容不需要打印2</h1>
<button onclick="doPrint()">打印按钮</button>

function doPrint() {
    bdhtml = window.document.body.innerHTML;
    sprnstr = "<!--startprint-->";
    eprnstr = "<!--endprint-->";
    prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
    prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
    window.document.body.innerHTML = prnhtml;
    window.print();
}

[xiaoqiangz]

bdhtml=window.document.body.innerHTML;
sprnstr="";
eprnstr="";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML = bdhtml;