Skip to content

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

New issue
New issue
Open
Open
[js] 第137天 用js实现页面局部打印和预览原理是什么呢？同时在IE上有什么不同？#1134
Labels
jsJavaScript
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on Aug 30, 2019
Collaborator

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

Activity

haizhilin2013
added
jsJavaScript
on Aug 30, 2019
bowencool

bowencool commented on Aug 31, 2019

@bowencool
bowencool
on Aug 31, 2019 · edited by 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

xiaotianxia commented on Sep 2, 2019

@xiaotianxia
xiaotianxia
on Sep 2, 2019
@media print {
    *:not(.somedom) {
         display: none;
    }
}

这样吗

bowencool

bowencool commented on Sep 4, 2019

@bowencool
bowencool
on Sep 4, 2019
@media print {
    *:not(.somedom) {
         display: none;
    }
}

这样吗

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

xiaotianxia

xiaotianxia commented on Sep 4, 2019

@xiaotianxia
xiaotianxia
on Sep 4, 2019
@media print {
    *:not(.somedom) {
         display: none;
    }
}

这样吗

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

是哦 是我草率了:grin:

censek

censek commented on Feb 19, 2020

@censek
censek
on Feb 19, 2020
<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

xiaoqiangz commented on Jul 13, 2022

@xiaoqiangz
xiaoqiangz
on Jul 13, 2022

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@xiaotianxia@xiaoqiangz@bowencool@censek

        Issue actions
          [js] 第137天 用js实现页面局部打印和预览原理是什么呢？同时在IE上有什么不同？ · Issue #1134 · haizlin/fe-interview