[英]ReactJS - How to print all the content of a Scrollable elment with react-to-print
[英]How can I print an page with react-to-print
我的表格上需要一个打印按钮。 我正在为一个图书馆做一项研究,我发现了这个:
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
我不确定我是否理解您的问题,但我会尝试回答,由于所有子文件夹,您提供的示例真的很难阅读。 基本上,要打印对打印做出反应,您需要做的是制作一个普通组件并在同一级别上引用它。 我看到你使用 class 组件,所以我只是从 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>
);
}
}
它说“触发器”的地方是你渲染按钮的地方。 我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.