window.print react+antd 分页打印去掉页眉页脚

框架：react+antd

查看demo->A4打印
查看demo->A4表格分页打印
代码仓库：https://gitee.com/chenxiaoyi27/rc-comp
代码路径：/src/views/components/printA4

一、代码：

window.print();

二、分页打印+谷歌打印的css样式

我这里是表格的打印，表格数据很多，打印时需要分页。浏览器打印工具自动分页，Table的表头会自动显示在第2页上，但是顶着第2页的顶部，没有上边距，且上一页页尾也没有下边距，还有表格行拆开的样式。

为了解决这些样式丑的问题，决定手动分页。未打印状态显示完整的1个表格，打印状态时，将1个表格拆成多个表格，代码如下：（适合表格每行只显示1行）

（打印样式须知：A4打印，css页面宽高为：210mm*297mm，适中的边距为：上下25.4mm，左右19.1mm。）

this.state={tableData: [],//表格数据printSize: 25//分页后每页数据条数
};
//jssplitTable() {//打印时表格分离let { tableData, printSize } = this.state, tables = [], i = 0;for (i = 0; i < parseInt(tableData.length / printSize); i++) {let tmp = [];for (let j = i * printSize; j < (i + 1) * printSize; j++) {tmp.push(tableData[j]);}tables.push(tmp);}if (tableData.length % printSize !== 0) {let tmp = [];for (let j = i * printSize; j < tableData.length; j++) {tmp.push(tableData[j]);}tables.push(tmp);}return tables.map((item, index) => {return <div key={index} className="printTable">{index !== 0 && <p style={{ height: '25.4mm' }} />}{/*25.4mm是上下边距*/}<Table columns={this.columns} dataSource={item} pagination={false}size="small" bordered rowKey={record => record.id}/><div style={{ pageBreakAfter: 'always' }} />{/*分页符*/}</div>});}//html
render () {
let {printState, tableData， printSize} = this.state;
return <div className="print-wrap"><div className="print-content">{!printState || tableData.length < printSize ?  //不是打印状态或表格数据只有1页时<div className="printOneTable"><Table columns={this.columns} dataSource={tableData} pagination={false}size="small" rowKey={record => record.id}/></div> :this.splitTable()}</div>
</div>
}
//css
.print-wrap{width: 210mm;
}
.print-content{@page {margin: 0;}
}
.printTable {height: 271.6mm;padding: 0 19.1mm;@page {margin: 0;}
}
.printOneTable {height: 271.6mm;padding: 0 19.1mm;
}

说明：
1）拆成多个Table后，每个Table前加一个高度为上边距的p元素，直接用margin-top会有塌陷问题。
2）设置每个Table页的高度为(297mm-上边距)。
3）每次循环最后加一个分页符<div style={{ pageBreakAfter: 'always' }} />，不加的话会出现多页打印，最后一页有页脚（网址和页码）的问题。单页打印可不加。
4）splitTable()分离表格数据的方法通用。
5）谷歌打印去除页眉页脚用css即可。

三、ie浏览器去除页眉页脚

分页同上述二。
ie的打印去除页眉页脚需要用到注册表，以下代码通用：

// 打印去掉页眉页脚printPage(callback) {//除ie外，其余浏览器需要给最外层容器添加css：@page{margin:0}function pagesetup_null() {var HKEY_Path = 'HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\'; // 定义注册表位置// name的值可为header（页眉），footer（页脚），margin_bottom（下边距），margin_left（左边距），margin_right（右边距），margin_top（上边距）。function PageSetup(name, value, onSuccess, onFail) {try {var Wsh = new window.ActiveXObject('WScript.Shell');Wsh.RegWrite(HKEY_Path + name, value); // 修改注册表值onSuccess && onSuccess();} catch (e) {onFail & onFail();}}PageSetup('footer','',() => PageSetup('header', '', () => window.print(), () => Message.modalError('需要运行ActiveX对象后，才能进行打印设置。')),() => Message.modalError('需要运行ActiveX对象后，才能进行打印设置。'));}if (Util.isIE()) {pagesetup_null();} else {window.print();}callback && callback();},

使用此方法，若提示‘需要运行ActiveX对象后，才能进行打印设置。’则需要进行如下操作：
internet选项-安全-自定义级别-ActiveX控件和插件-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本（不安全）-启用（不安全）