React中實作生成Excel表格并列印功能
-
-
- 成品展示：
- 解決思路：
- 代碼示範：
-
- 結構樣式部分：
- 函數實作部分：
- 原理分析：
-
工作中遇到了一個需求，要求根據背景傳回的資料，生成一個簽到表然後可以列印。
成品展示：
解決思路：
1、原生table建立表格并設定樣式
2、調用浏覽器底層列印方法
代碼示範：
結構樣式部分：
<div key="demo1">
<Card bordered={false}>
<div style={{ width: '100%' }}>
<div style={{ marginBottom: 10 }}>
<button
onClick={() => printInfo()}
style={{
backgroundColor: '#1890ff',
border: '0',
borderRadius: '15px',
width: '100px',
color: '#fff',
cursor: 'pointer',
}}
>
列印
</button>
</div>
<div id="print1" style={{ pageBreakAfter: 'always' }}>
<div style={{ textAlign: 'center', fontSize: 'large', fontWeight: '600' }}>
教育訓練簽到表
</div>
<table
style={{
verticalAlign: 'middle',
textAlign: 'center',
width: '100%',
marginTop: 8,
}}
border="1px solid #e8e8e8"
cellPadding="3"
cellsPacing="0"
>
<tr style={{ fontSize: 'medium', fontWeight:"bold" }}>
<td width="10%">教育訓練名稱</td>
<td width="40%">食品安全管理者教育訓練</td>
<td width="10%">時間</td>
<td width="40%">2019-10-28 12:00:00 ~ 2019-10-29 12:00:00</td>
</tr>
<tr style={{ fontSize: 'medium', fontWeight:"bold" }}>
<td width="10%">地點</td>
<td width="40%">二樓204會議室</td>
<td width="10%">教育訓練方式</td>
<td width="40%">線下教育訓練</td>
</tr>
<tr style={{ fontSize: 'medium', fontWeight:"bold" }}>
<td width="10%">姓名</td>
<td width="40%">簽字</td>
<td width="10%">姓名</td>
<td width="40%">簽字</td>
</tr>
<tr style={{ fontSize: 'medium' }}>
<td width="10%">張三</td>
<td width="20%"></td>
<td width="10%">李四</td>
<td width="20%"></td>
</tr>
<tr style={{ fontSize: 'medium' }}>
<td width="10%">張三</td>
<td width="20%"></td>
<td width="10%">李四</td>
<td width="20%"></td>
</tr>
<tr style={{ fontSize: 'medium' }}>
<td width="10%">張三</td>
<td width="20%"></td>
<td width="10%">李四</td>
<td width="20%"></td>
</tr>
<tr style={{ fontSize: 'medium' }}>
<td width="10%">張三</td>
<td width="20%"></td>
<td width="10%">李四</td>
<td width="20%"></td>
</tr>
<tr style={{ fontSize: 'medium' }}>
<td width="10%">張三</td>
<td width="20%"></td>
<td width="10%">李四</td>
<td width="20%"></td>
</tr>
<tr style={{ fontSize: 'medium' }}>
<td width="10%">張三</td>
<td width="20%"></td>
<td width="10%">李四</td>
<td width="20%"></td>
</tr>
</table>
</div>
</div>
</Card>
</div>
函數實作部分：
/**
* 列印
*/
export function printInfo() {
const html = window.document.getElementById('print1').innerHTML;
const win = window.open('', '列印', 'height=1100,width=1100');
win.document.write('<html><head><title></title>');
win.document.write('</head><body >');
win.document.write(html);
win.document.write('</body></html>');
win.document.close();
win.focus();
win.print();
win.close();
};
原理分析：
- 通過為div綁定id
div id="print1"
- 通過更深一步了解得知，window.open是打開新視窗的指令，而window.print才是-列印的指令
- 菜鳥教程——window.prin()
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)