[英]Adjust page size in ReactToPrint
我正在使用ReactToPrint库使用 React.js 打印我的页面的一部分。
<ReactToPrint trigger={() => ( <Button variant="contained" color="primary" className={classes.button} > PRINT <PrintIcon className={classNames(classes.leftIcon, classes.iconSmall)} /> </Button> )} content={() => this.componentRef} /> <Barcode ref={el => (this.componentRef = el)} name={this.state.displayValue} value={this.state.barcodeValue} text={this.state.displayValue} fontSize={20} width={2} />
我可以在 GitHub 文档中看到pageStyle
属性,但找不到如何使用它。 有人可以帮我将尺寸设置为 2.5 x 4 英寸吗?
export function styledPdf(){
const pageStyle = `{ size: 2.5in 4in}`;
const divPrint = React.useRef(null);
return (
<Div ref={divPrint}>
<ReactToPrint pageStyle={pageStyle}
trigger={() => <button>Print this out!</button>}
content={() => divPrint.current}
/>
</Div>
)
}
如果react-to-print
的pageStyle
不能正常工作,你可以试试这个。
const pageStyle ="
@page {
size: A4 landscape;
}
";
并添加到样式标签
<div id="item-detail-print">
<style>{pageStyle}</style>
<Barcode
value={data?.itemById.barCode}
ref={componentRef} />
</div>
这对我有用。
const handlePrint = useReactToPrint({
pageStyle: `@media print {
@page {
size: 500mm 500mm;
margin: 0;
}
}`,
{...}
});
使用模板文字动态设置它
const [dimensions, setDimensions] = React.useState({ width: 500, height: 500 });
pageStyle: `@media print {
@page {
size: ${dimensions.width}px ${dimensions.height}px;
margin: 0;
}
}`,
带 useReactToPrint
const [dimensions, setDimensions] = React.useState({ width: 500, height: 500 });
const handlePrint = useReactToPrint({
pageStyle: `@media print {
@page {
size: ${dimensions.width}mm ${dimensions.height}mm;
margin: 0;
}
}`,
content: () => componentRef.current,
onAfterPrint: () => handleResetPrint()
});
你可以这样使用,也可以通过 npm 的react-to-print
推荐。
@media all {.page - break { display: none; } } @media print { html, body { height: initial;important: overflow; initial:important; - webkit - print - color - adjust. exact: } } @media print {;page - break { margin - top: 1 rem; display: block; page - break -before: auto; } } @page { size: auto; margin: 20 mm; }
不确定您是否仍然遇到此问题,但请尝试
pageStyle="@page { size: 2.5in 4in}"
在您的 ReactToPrint 中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.