使用动态HTML页面在JavaScript中打开窗口
问题描述:
如何在JavaScript中打开新窗口并插入HTML数据和动态内容值,最后打印打开的窗口页面。使用动态HTML页面在JavaScript中打开窗口
- 打开的窗口中必须有每行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行数据1row卡,如果4行数据2个卡)
*, html, body { box-sizing:border-box; }
body { margin:50px;}
.clear { clear:both; }
#idCard {
\t width:310px;
\t padding:10px;
\t border:2px solid #000;
\t box-sizing:border-box;
\t font-family:Arial, Helvetica, sans-serif;
}
#idCard label {
\t display:block;
\t font-size:13px;
\t margin:0 0 5px 0;
}
#idCard .photoBox {
\t width:80px;
\t height:60px;
\t background:#306;
\t float:right;
\t border:0px solid red;
}
#idCard .detailBox {
\t width:150px;
\t height:60px;
\t margin:0px 0 0px 0;
\t border:0px solid red;
\t float:right;
\t 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>
样品打开新寡妇图像是:
答
在该响应我创建测试数据阵列,因为ADATA阵列对我们来说是未知的,所以数组初始化:
var aData =[];
// Just for test purpose, you can provide your own data
function initTestData(max){
var i = 0, emp = [];
for(i; i < max; i++){
emp[0] = "https://t1.gstatic.com/images?q=tbn:ANd9GcTGBDXFOEElnYoEZkYStOBIT_sogGr6zUG44opA4mq7Pf0SgevkGIMjSKmw6oktM4HK5NaKcWuQLA";
emp[1] = "Emp-"+i;
aData[i] = emp;
emp = [];
}
}
,我修改了generateIDCardForPrint功能以适合你的要求:
function generateIDCardForPrint() {
// Card model holder
var idCardElement = $("#idCard");
// Data rows count
var tablerows = aData.length;//$('#tblPrintCards tr').size();
/** Finding how many rows */
var tblTr = (tablerows/2);
var t = $('<table>');
t.css("width", "100%");
for(var i= 0; i < tblTr; i++){
var row = $('<tr>');
for(var j=0; j < 2; j++){
if(i * 2 + j < tablerows){
var td = $('<td>');
var ImageID = aData[i * 2 + j][0];
var images = new Image();
var empImages = $('.photoBox', idCardElement);
var empName = $('.detailBox > label > strong', idCardElement);
images.src = ImageID;
images.id = "EmpImage";
empImages.html(images);
empImages.find('img').each(function(a){$(this).css({height: "80px", width: "80px"})});
empName.text(aData[i * 2 + j][1]);//Hello HTML
var HtmlContent = idCardElement.html(),
Card = $('<div>').attr("id","idCard").html(HtmlContent);
td.html(Card);
td.css("align", "left");
row.append(td);
}
}
t.append(row);
}
var cssStyle= "*,body,html{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}#idCard .photoBox{width:80px;height:60px;background:#306;float:right;border:0 solid red}#idCard .detailBox{width:150px;height:60px;margin:0;border:0 solid red;float:right;padding:15px 0 0}";
var myWindow = window.open("", "MsgWindow", "width=1256, height=300");
myWindow.document.write('<html><head><title>Print it!</title><style>'+cssStyle+'</style></head><body>');
myWindow.document.write('<table>'+t.html()+'</table>');
myWindow.document.write('</body></html>');
myWindow.print();
}
我认为你可以使这个函数的代码更干净。 http://jsfiddle.net/vubkeb5w/3/
什么是您的实际问题? – AFract 2015-02-06 13:47:46
我无法使用动态数据打开html内容。并且它的窗口必须取决于行的数目。上面的示例o/p图像仅在3行中打印5行。 – Hydrogen 2015-02-06 13:55:01
'tbl'没有出现定义? ,请参阅'tbl.appendChild(t);'? – guest271314 2015-02-06 15:01:36