我该如何在JavaScript中打开一个新窗口并插入HTML数据和动态内容值,并最终打印该打开的窗口页面。
- 打开的窗口必须有每行2个卡片。(取决于隐藏表格)
- 例如- 如果在我的隐藏表(
tblPrintCards
)中有1或2行,则打开的窗口将具有单行中的2个身份证(HTML代码)。
我的JavaScript代码:
function generateIDCardForPrint() {
/** get all data **/
var oTableExt = $('#tblPrintCards').dataTable();//hide jquery table have data//(photo base64 string,name)
var tablerows = $('#tblPrintCards tr').size();
/** Finding how many rows */
var tblTr = (tablerows / 2);
var t = document.createElement('table');
t.width = "100%";
var row = document.createElement('tr');
var td = document.createElement('td');
var ImageID = "data:image/jpg;base64," + aData[0][4];
var images = new Image();
images.src = ImageID;
images.id = "EmpImage";
$('#empImages').html(images);
$('#empImages img').css("height", "80px");
$('#empImages img').css("width", "80px");
$('#empName').text(aData[0][2]);//Hello HTML
var HtmlCode = $('#callID').html();//calling HTML Code static content
td.innerHTML = HtmlCode;
td.align = "left";
row.appendChild(td);
t.appendChild(row);
//Fetch element where table is created & append
var id = document.getElementById("tbl");
//adding table to html code.
tbl.appendChild(t);
alert(t.innerHTML)
var myWindow = window.open("", "MsgWindow", "width=1256, height=300");
myWindow.document.write(t.innerHTML);
myWindow.print();
}
我的HTML代码
<div id="idCard">
<div class="photoBox">
<img src="images/photo.jpg" alt=""></div>
<div class="clear"></div>
<div class="detailBox">
<label><strong>HERE Dynamic Name<strong></label>
</div>
<div class="clear">
<!-- idCard ends here -->
</div>
</div>
- 生成的HTML内容(卡片)将在新窗口中显示,根据隐藏表格行数确定(如果有2行数据,则显示1行卡片,如果有4行数据,则显示2行卡片)
*, html, body { box-sizing:border-box; }
body { margin:50px;}
.clear { clear:both; }
#idCard {
width:310px;
padding:10px;
border:2px solid #000;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
#idCard label {
display:block;
font-size:13px;
margin:0 0 5px 0;
}
#idCard .photoBox {
width:80px;
height:60px;
background:#306;
float:right;
border:0px solid red;
}
#idCard .detailBox {
width:150px;
height:60px;
margin:0px 0 0px 0;
border:0px solid red;
float:right;
padding:15px 0 0 0;
}
<div id="idCard">
<div class="photoBox"><img src="images/photo.jpg" alt=""></div>
<div class="clear"></div>
<div class="detailBox">
<label><strong>Here Dynamic Name<strong></label>
</div>
<div class="clear"><!-- idCard ends here --></div>
</div>
以下是打开新窗口图像的示例:
tbl
没有被定义?看一下tbl.appendChild(t);
? - guest271314