JavaScript实现打印局部页面样式丢失

先实现打印局部的页面

html部分

<div id="printFile">需要被打印的区域</div>
<button onclick="printFile()">点击打印</button>

js部分

function printFile(id) {
  var dom = document.getElementById("printFile");
  var win = window.open();
  win.document.write(dom.outerHTML);
  win.print();
  win.close();
};

页面效果

打印效果

这个样子打印是没有问题的，因为我们没有给页面加任何样式，但是如果我们给页面加上样式后会发现只有行内样式有效，外部引入的样式和通过style标签添加的样式都没有效果。通过我反复的实验发现如果把样式写在要打印的区域内就会有效果，比如这样：

<div id="printFile">
  <style>
    .box {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
    }
  </style>
  <div>需要被打印的区域</div>
  <div class="box">123</div>
</div>

效果是这样的：

所以解决的办法有两种

1. 打印区域使用行内样式
2. 把样式标签写到打印区域内

但是我总觉得这两种方式都不太好，不知道神奇的网友有没有更好的解决方案