自定义打印功能

首先讲打印的模板方式静态目录文件夹下

文件的内容

<script>
    //回调函数ee
    function reciveMsg(e) {
        console.log(e)
        let { data } = e
        // document.body.innerHTML = e.data
        // 模拟假数据
        let projectData = { name: "张三", code: "001", person: "小明" };
        let equipmentData = [{ equipmentNum: "10000", materielCode: "z111", modal: "iphone", name: "硬盘", type: "出库类型", code: "001", receiving: "小明" }]
        // 打印自定义
        let tem = `
	<table class="outHistoryTable" width="100%" border="1" cellspacing="0 " cellpadding="6">
		<tr>
			<th colspan="9">${data[0]}出库单</th>
		</tr>
		<tr>
			<td colspan="3">项目名称:<span>${data[0]}</span></td>
			<td colspan="3">项目编码:<span>${data[1].project_number}</span></td>
			<td colspan="3">出库时间:<span style="margin-left:20px">    年</span><span style="margin-left:20px">   月</span><span style="margin-left:20px">  日</span></td>
		</tr>
		<tr>
			<td>1</td>
			<td>设备序列号</td>
			<td>物料编码</td>
			<td>设备型号</td>
			<td>设备名称</td>
			<td>出库类型</td>
			<td>项目编号</td>
			<td>收货方</td>
			<th>设备负责人</th>
        </tr>`
        console.log(data.length)
        if (data.length < 10) {
            var html = '';
            data.map((item, index) => {
                if (index == 0) {
                    // nothing...
                } else {

                    let updata = `<tr>
                 	<td>${index + 1}</td>
                 	<td>${item.serial_number}</td>
                 	<td>${item.code}</td>
                 	<td>${item.model}</td>
                 	<td>${item.device_name}</td>
                 	<td>${item.out_type}</td>
                 	<td>${item.project_number}</td>
                 	<td>${item.receiving}</td>
                 	<td>${item.charge}</td>
                 </tr>`
                    html += updata;

                }
            })
            for (let i = 0; i < 11 - data.length; i++) {
                let nullUpdata = `<tr>
                     	<td></td>
                     	<td></td>
                     	<td></td>
                     	<td></td>
                     	<td></td>
                     	<td></td>
                     	<td></td>
                     	<td></td>
                     	<td></td>
                     </tr>`
                html += nullUpdata;
            }


        }
        let footer = `<tr>
        		<td colspan="9">
        			<div class="footer">
        				<div>项目申请人: <span>${projectData.person}</span></div>
        				<div>电话:</div>
        				<div>区域专员:</div>
        				<div>库管员:</div>
        				<div>审批人:</div>
        			</div>
        		</td>
        	</tr>
        </table>`;
        tem = tem + html + footer;
        document.body.innerHTML = tem

    }
    //监听message事件
    window.addEventListener("message", reciveMsg);
</script>





// 调用打印的方法这是
const printTemplateFun = () => {
	let resultData = [];
	selectedRowKeys.map((i, j) => {
		let index = datas.findIndex(v => v.id == i);
		// console.log(index)
		resultData.push(datas[index])
	})
	const $iframe = document.getElementById("result")
	console.log(resultData)
	$iframe.contentWindow.postMessage(resultData, '*')

	setTimeout(() => {
		if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
			PageSetup_Null();
		}
		function PageSetup_Null() {
			var hkey_path;
			hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
			try {
				var RegWsh = new ActiveXObject("WScript.Shell");
				RegWsh.RegWrite(hkey_path + "header", "");
				RegWsh.RegWrite(hkey_path + "footer", "");
			} catch (e) {

			}
		}
		$iframe.contentWindow.print();
	}, 1);

	$iframe.contentWindow.addEventListener('afterprint', async () => {
		let id = selectedRowKeys.join();
		let res = await SettingProviderIspriniting({ id });
		if (res.status == 0) {
			message.success('打印成功');
			setPrintingModal(false);
			loadProbiderList(searchVal);
			setSelectedRowKeys([]);
		}
	});
}

// 通过iframe 标签引入静态文件夹

<iframe src=’./templateProvider.html’ style={{ display: ‘none’ }} id=‘result’>