react print

最新推荐文章于 2024-05-12 10:06:04 发布

努力成为好爸爸

最新推荐文章于 2024-05-12 10:06:04 发布

阅读量264

点赞数

分类专栏：报表打印相关

本文链接：https://blog.csdn.net/jsjpanxiaoyu/article/details/104099108

版权

报表打印相关专栏收录该内容

13 篇文章 0 订阅

订阅专栏

印刷しないエリアId:NonePrintDiv
印刷するエリアId:printDiv
//npm install --save html2canvas
import html2canvas from 'html2canvas';

//印刷ボタン処理
document.getElementById('NonePrintDiv').style.display = "none";
html2canvas(document.getElementById('printDiv')).then(
(canvas) => {
this.setState({
printStyle: { visibility: 'hidden' }
}, () => {
window.print(canvas);
this.setState({
printStyle: {}
});
document.getElementById('NonePrintDiv').style.display = "";
});
}
);

//必要なCSSスタイル
//const printTestCss = 'style/printTest.css';
//<link rel="stylesheet" type="text/css" href={printTestCss} />
<link rel="stylesheet" type="text/css" href="style/printTest.css" />

//printTest.css
@media print{
@page {
size: landscape;//横に設定する
margin: 0mm;
}
.printArea {
width: 60%;
height: 600%;
margin: 0mm;
filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
zoom: 90%;//
}
}