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

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

如下

vue打印局部区域样式CSS错乱不生效_第1张图片

打印情况如下

vue打印局部区域样式CSS错乱不生效_第2张图片

 

你可能感兴趣的:(DOM&BOM操作,HTML5,vue.js入门)