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

最近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;
    }

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

如下

打印情况如下