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

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

haizhilin2013

2019-08-31 04:37:25 星期六

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

6 Comments Powered by GitHub & Vssue

Comments per page

< Page 1 / 1 >

bowencool 2019-08-31 10:29:29

#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)
}

0 0 0

xiaotianxia 2019-09-02 13:43:56

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

这样吗

0 0 0

bowencool 2019-09-04 01:48:34

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

这样吗

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

0 0 0

xiaotianxia 2019-09-04 09:06:18

@media print {
    *:not(.somedom) {
         display: none;
    }
}
这样吗
这样写的话.somedom的子元素也不见了吧？😰

是哦是我草率了:grin:

0 0 0

censek 2020-02-19 06:32:05

<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();
}

0 0 0

xiaoqiangz 2022-07-13 03:20:12

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;

0 0 0

Comments per page

< Page 1 / 1 >