利用@media print样式打印页面局部元素

需求：打印页面中点击某按钮弹出的弹窗中内容，而直接调用window.print()会打印整个页面内容。
思路：打印时只要隐藏掉其他元素就好了
解决：
1.使用CSS @media print{}：

/* 调用window.print()时生效的样式 */
@media print {
  @page {
    /* 横向 */
    size: landscape;
    /* 去除浏览器默认页眉页脚 */
    margin: 0;
  }
 /* 给需要打印的区域内或同级不需要打印的元素加上这个类 */
  .noprint {
    display: none;
  }
   /* 这里的id我用于选中modal，然后给其中背景色设置为透明，去掉弹窗头和脚及阴影 */
  #forprint {
    .ant-modal-mask {
      background-color: transparent;
    }

    .ant-modal-wrap.modalwrap {
      background-color: transparent;
      .ant-modal-content {
        background-color: transparent;
        box-shadow: none;
        .ant-modal-header {
          display: none;
        }
        .ant-modal-close {
          display: none;
        }
      }
    }
  }
/* 需要打印的区域*/
  .printable {
    display: block;
  }
  /* 默认打印内容区背景色*/
  -webkit-print-color-adjust: exact;
}

2.由于在vue中使用，用原生js给需要隐藏的元素设置对应类名/id

     let modalroot = document.getElementsByClassName('ant-modal-root');

  for (let i = 0; i < modalroot.length; i++) {
        if (modalroot[i].childNodes[1].className == 'ant-modal-wrap billmodalwrap') {
          modalroot[i].setAttribute('id', 'forprint');
          modalrootNum.value = i;
        }
      }

      document.getElementById('app')?.setAttribute('class', 'noprint');
      //关闭时去掉添加类名和id
      function handleVisibleChange(visible: boolean) {
      if (!visible) {
        showFace.value = true;
        document.getElementById('app')?.setAttribute('class', '');
        modalroot[modalrootNum.value].setAttribute('id', '');
      }
    }