打印输出

发表于 2019-05-07 更新于 2023-01-25

打印输出

今天接到一个奇葩的工作，要求打印出清单。我的想法是，直接生成一个html，然后打印。打开一个新页面使用window.open，但是打开了之后，内容如何传递过去呢？网上找到了答案。

相关参考

下面的示例，演示了xtemplate、window.open的用法。

var newWin = window.open();

var tpl = new Ext.XTemplate(
	'<html>',
	'<head>',
	'<title>{meeting_name}-预约费用清单</title>',
	'<style>',
		'body{background: #eee;}',
		'table{width: 900px;text-align: center;margin: 0 auto;font-size: 18px;line-height: 35px;    border-collapse: collapse;} ',
		'.container{width: 900px;height:1200px;  margin: 0 auto;   padding: 40px;background: white;}',
		'.bottom div{width: 32%;display: inline-block;font-size: 20px;padding: 20px 0;}',
		'h1{text-align: center;}',
	'</style>',
	'</head>',
	'<body>',
	'<div class="container">',
		'<h1>预约费用清单</h1>',
		'<table border="1">',
			'<tr>',
				'<th>序号</th>',
				'<th>单品</th>',
				'<th>单价</th>',
				'<th>数量</th>',
				'<th>总价</th>',
			'</tr>',
			'<tpl for="commodity_id_list">',
			'<tr>',
				'<td>{#}</td>',
				'<td>{commodity_name}</td>',
				'<td>￥{commodity_price}</td>',
				'<td>{count}</td>',
				'<td>￥{total}</td>',
			'</tr>',
			'</tpl>',
			'<tr>',
				'<td colspan="4">合计</td>',
				'<td>￥{meeting_cost_details}</td>',
			'</tr>',
		'</table>',
		'<div class="bottom">',
			'<div>预约方领导签字：</div>',
			'<div>管理方领导签字：</div>',
			'<div>主管领导签字：</div>',
		'</div>',
	'</div>',
	'</body>',
	'</html>'
);
newWin.document.body.innerHTML = tpl.apply(record.data);

兼容性问题

var newWin = window.open();
将一段HTML代码，插入到一个页面中有三种方法：

1）document.body.appendChild(yourCode)
2 ) document.body.innerHTML = yourCode
3 ) document.write(yourCode)

使用newWin.doucment.body.appendChild(formElm )方法将表单元素插入到空页面，IE8下会报错Error:不支持此方法接口，而其它浏览器正常，因此选择另外两种方法了。

另外一种方式是，在window.open()的页面内，通过window.opener的方式与父页面进行数据通信。