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

相关文章推荐

瘦瘦的饼干 · 杭四中江东学校投用在即· 1 月前 ·

爱健身的马铃薯 · vue-cli+Electron项目中___ ...· 4 月前 ·

有爱心的饼干 · 制造业数字化转型专区_服务商简介--深圳市工 ...· 6 月前 ·

完美的鸵鸟 · 百度贴吧· 7 月前 ·

豪爽的篮球 · 民俗学_社会学视野网· 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;
    ···
  }
  ···
}

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