欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue打印局部区域样式CSS错乱不生效

程序员文章站 2022-06-23 18:04:37
...

最近vue项目要实现打印网页中局部区域的要求,但是用下列方式的时候显得样式全部都没有作用上

    printContent(){
      let subOutputRankPrint = document.getElementById('print'); // 要打印区域的元素id
      console.log(subOutputRankPrint.innerHTML);
      let newContent =subOutputRankPrint.innerHTML;
      let oldContent = document.body.innerHTML;
      document.body.innerHTML = newContent;
      window.print();
      window.location.reload();
      document.body.innerHTML = oldContent;
      return false;
    }

后来折中一下,将打印区域的样式全部写成行间样式,就可以了

如下

vue打印局部区域样式CSS错乱不生效

打印情况如下

vue打印局部区域样式CSS错乱不生效