打印带有样式的反应组件

Question

我正在尝试打印仪表板。 我已经设置了一个带有id的容器，以便能够这样做。 打印确实有效，但最终会忽略所有设置的样式以及网格布局。

如何使用 Bootstrap 网格和样式打印它？ 样式位于单独的 css 文件中。

printDashboard(){
    let printContents = document.getElementById('dashboard_container').innerHTML;
    let w = window.open();
    w.document.write(printContents);
    w.print();
    w.close();
},

Answer 1

这是一个解决方案。
您可以包含来自外部位置的文件。
然后在打印前设置超时，让样式有机会被实现。

printDashboard(){
    let printContents = document.getElementById('dashboard_container').innerHTML;
    let w = window.open();
    w.document.write('<link rel="stylesheet" href="./css/app.css" type="text/css" />');
    w.document.write(printContents);
    setTimeout(function(){w.print();},1000);
    w.print();
    w.close();
},