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//分页后每页数据条数
};
//js
	splitTable() {//打印时表格分离
        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控件初始化并执行脚本（不安全）-启用（不安全）