Question

我对这个反应很新，所以对于我的项目，我想通过点击一个按钮打印发票，我的方法如下

以下代码用于使用iframe获取打印屏幕

 openFrame (print_c) 
{

        var pri = document.getElementById("ifmcontentstoprint").contentWindow;
        pri.document.open();
        pri.document.write(print_c.innerHTML);
        pri.document.close();
        pri.focus();
        pri.print();
}

以下代码在render（）函数

中

    var print_content= 
            <div><table cellPadding={0} cellSpacing={0} className="t0">
              <tbody><tr>..............</tr></tbody></table></div>;
<iframe id="ifmcontentstoprint" style={{height: 0, width: 0, position: 'absolute'}} />
    <button id={"invoice"+count} value={order.orderId} className="btn btn-info" style={{ color: "black", marginTop: "1%", marginBottom: "1%", marginLeft: "1%", marginRight: "1%", textAlign: "right"}} onClick={this.openFrame.bind(print_content)}>Generate Invoice</button>

结果在打印屏幕中未定义

Answer 1

我想，您应该发布完整的js文件和html文件，以便更清楚地了解问题。以下解决方案基于我对您上面提到的代码的理解。

使用bind方法绑定onClick处理程序。 bind方法接受执行引用作为第一个参数。所以你需要传递null或'this'作为第一个参数，print_content作为第二个参数传递，如此。

<button id={"invoice"+count} value={order.orderId} className="btn btn-info" style={{ color: "black", marginTop: "1%", marginBottom: "1%", marginLeft: "1%", marginRight: "1%", textAlign: "right"}} onClick={this.openFrame.bind(null, print_content)}>Generate Invoice</button>

PS：执行引用是'this'关键字指向函数内部的对象。由于您没有使用'this'关键字，因此可以将其作为null传递。

我想点击使用react打印发票

1 个答案: