window.print()实现打印指定内容——功能实现_echohye的技术博客_

相关文章推荐

追风的羽毛球 · 使用Axure设计基于中继器的左侧导航菜单 ...· 1 月前 ·

旅行中的荒野 · 崔永元, 你的商人底裤掉了· 4 月前 ·

小眼睛的手套 · 中资地产出海“造城记” - 知乎· 1 年前 ·

眼睛小的番茄 · 【东风御风】东风御风口碑_东风御风怎么样_东 ...· 1 年前 ·

谦和的蘑菇 · 网页版百度网盘怎么新建文件夹？-百度经验· 1 年前 ·

HTML

<!-- 打印的内容会生成两页纸 -->
 <div id="report">
    <h1>..</h1>  <----重点
    <div>..</div>
</div>

function printpage() {
    // 打印的整体思路是：获取body的内容进行存储，然后获取打印区域的内容填充到body中，进行打印，打印完成后，再将之前存储的body内容重新赋值给body即可。
    // windown.print()默认打印的内容是body的内容。
    let oldStr = window.document.body.innerHTML;
    let newStr = document.getElementById('printContent').innerHTML;
    window.document.body.innerHTML = newStr;
    window.print();
    window.document.body.innerHTML = oldStr;
}

上面的方法是百度的，但我试了，好像行不通，大伙可以自行验证试试
下面是方法思路

<template>
  <div id="home">
    <Viewer></Viewer>
    <div id="allContent">
      <PopupAttribute></PopupAttribute>
      <LayerManage></LayerManage>
      <MenuList></MenuList>
      <BottomBar></BottomBar>
    </div>
  </div>
</template>

// 执行打印的时候，把不需要的内容进行隐藏，打印完后再显现
printPage() {
  let content = document.querySelector("#allContent");
  content.style.display="none";
  window.print();
  content.style.display="block";
}

window.print()实现打印指定内容——功能实现_嵌套

window.print()实现打印指定内容——功能实现_嵌套_02

样式问题

//就是执行print后，样式在这里可以自定义
//在style中，使用@media print{}
//不要嵌套写
//如果使用less,scss 是不会生效的
//只能使用css语言格式, 就是不能像less、scss嵌套写
@media print {
  div{
    font-size:12px;
    ···
  }
  ···
}

箴言： 因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。