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

这篇具有很好参考价值的文章主要介绍了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);
}

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

const stylesText = Array.from(document.styleSheets)
    .map((s) =>
      Array.from(s.cssRules)
        .map((z) => z.cssText || "")
        .join("\n")
    )
    .join("\n");

将代码加入方法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 = `<style>${stylesText}</style>`;
  iframe.contentDocument!.body.innerHTML = printBox!.innerHTML;
 iframe.contentWindow?.print();
    setTimeout(() => {
      document.body.removeChild(iframe);
    }, 5000);
};

补充：如果有哪些不需要打印的部分可以在上加上一个类名，并且在css部分写一一个媒体查询。
vue中演示：
标签：<div class="noPrint">不需要打印的部分</div>
样式：<style> @media print {.noPrint {display: none;}}</style>文章来源地址https://www.toymoban.com/news/detail-698165.html

到了这里，关于vue、js获取页面中所有css样式（包括link标签）案例为打印使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！