如何使用 javascript 函数打印 Reactjs 组件？答案

【问题标题】：How to print Reactjs components with javascript function?如何使用 javascript 函数打印 Reactjs 组件？
【发布时间】：2019-12-22 17:49:11
【问题描述】：

我在 Reactjs 中有一个表格，我想打印它，因为它应用了引导样式。
这是我的桌子：

我在点击打印按钮时写了这个js函数：

var divContents = document.getElementById("blah").innerHTML;
    var a = window.open('', '', 'height=500, width=500');
    a.document.write('<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><title></title></head>');
    a.document.write('<body>');
    a.document.write(divContents);
    a.document.write('</body></html>');
    a.document.close();
    a.print();

其中 blah 是包含表格 html 的 div 的 id。但这将我的 pdf 显示为：

如何打印引导 html 以及样式？
感谢您的宝贵时间 :)

【问题讨论】：

stackoverflow.com/questions/16498459/…

标签： javascript reactjs bootstrap-4

【解决方案1】：

试试这个代码：

var divContents = document.getElementById("printTable").innerHTML;
var a = window.open();
a.document.write('<html><head><meta charset="utf-8"><link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" ></head>');
a.document.write('<body>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();        
setTimeout(function(){
    a.focus();        
    a.print();
    a.close();
 },1000); // wait for images to load inside iframe

//a.print();

【讨论】：