vue、js获取页面中所有css样式（包括link标签）案例为打印使用

最近碰到一个需求：将弹窗中的表单打印出来，还要保留弹窗表单的样式，为了对页面造成的影响最小采取iframe方案。

获取弹窗html内容很好办

const print = () => {
  const printBox = document.querySelector(".problem-wrapper");
  const iframe = document.createElement("iframe");
  iframe.style.display = 'none'
  iframe.name = "printIframe";
  document.body.appendChild(iframe);
  //将弹窗html代码给iframe
  iframe.contentDocument!.body.innerHTML = printBox!.innerHTML;
  iframe.contentWindow?.print();
    setTimeout(() => {
      document.body.removeChild(iframe);
    }, 5000);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

这个时候我们点击打印按钮调用上面的方法，会发现表单缺少样式，怎么拿到缺少的css样式呢，代码如下

const stylesText = Array.from(document.styleSheets)
    .map((s) =>
      Array.from(s.cssRules)
        .map((z) => z.cssText || "")
        .join("\n")
    )
    .join("\n");
1
2
3
4
5
6
7

将代码加入方法print方法中
最终方法成品：

const print = () => {
  const stylesText = Array.from(document.styleSheets)
    .map((s) =>
      Array.from(s.cssRules)
        .map((z) => z.cssText || "")
        .join("\n")
    )
    .join("\n");
    //需要打印的容器的类名
  const printBox = document.querySelector(".problem-wrapper");
  const iframe = document.createElement("iframe");
  iframe.style.display = "none";
  iframe.name = "printIframe";
  document.body.appendChild(iframe);
  iframe.contentDocument!.head.innerHTML = ``;
  iframe.contentDocument!.body.innerHTML = printBox!.innerHTML;
 iframe.contentWindow?.print();
    setTimeout(() => {
      document.body.removeChild(iframe);
    }, 5000);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

补充：如果有哪些不需要打印的部分可以在上加上一个类名，并且在css部分写一一个媒体查询。
vue中演示：
标签：

样式：