如何解决如何打印具有反应打印功能的页面
我的表单上需要一个打印按钮。我正在为一个图书馆做一项研究,我发现了这个:
https://www.npmjs.com/package/react-to-print
我在考虑这个流程:一个组件导入并在我的代码中添加一行来调用该组件,打印按钮运行良好,但据我所知,这个组件需要我传递要完整打印的组件.
我尝试这样做,但出现此错误:
Attempted import error: './index' does not contain a standard export (imported as 'FormContent').
我的索引代码:
const App = () => {
let numb_days = 22
return (
<div className="m-4">
<FormField label="Salário Base" show_small_text="false" numb_days={ numb_days }/>
<hr />
<h6 className="mb-4"> Qtd. dias úteis: { numb_days } </h6>
<FormField label="Auxilio Refeição" show_small_text="true" numb_days={ numb_days }/>
<FormField label="Auxilio Alimentação" show_small_text="true" numb_days={ numb_days }/>
<FormField label="Plano de Saúde" show_small_text="false" numb_days={ numb_days }/>
<FormField label="Outros Benefìcios (VT)" show_small_text="true" numb_days={ numb_days }/>
<ComponentToPrint ref={(el) => (this.componentRef = el)} />
</div>
);
};
我的组件代码:
import React,{ Component } from "react";
import FormContent from "./index";
class ComponentToPrint extends Component {
render() {
return <FormContent ref={(el) => (this.componentRef = el)} />;
}
}
export default ComponentToPrint;
我想我一定犯了一个大错误,但我不明白如何将我的索引传递给这个组件并同时调用我的索引。
我找到了这个例子:https://codesandbox.io/s/interesting-cookies-k1bg9?file=/src/deliverySheet/ComponentToPrint.js
看来我需要遵循流程:
index -> print (my content).
但是为什么我做不到呢? ->
index -> my content (print)
或
index -> my content AND print
解决方法
我不确定我是否理解您的问题,但我会尝试回答它,您提供的示例由于所有子文件夹而很难阅读。基本上,您需要做的就是打印 whit react to print 制作一个普通组件并在同一级别上引用它。 我看到你使用了类组件,所以我只是从 react-to-print 文档中复制和粘贴。
import React from 'react';
import ReactToPrint from 'react-to-print';
import { ComponentToPrint } from './ComponentToPrint';
class Example extends React.PureComponent {
render() {
return (
<div>
<ReactToPrint
trigger={() => {
// NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
// to the root node of the returned component as it will be overwritten.
return <a href="#">Print this out!</a>;
}}
content={() => this.componentRef}
/>
<ComponentToPrint ref={el => (this.componentRef = el)} />
</div>
);
}
}
它说“触发器”的地方就是你渲染按钮的地方。 我希望有帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。