使用動態HTML頁面在JavaScript中打開窗口

Question

如何在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行數據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>

樣品打開新寡婦圖像是：

Answer 1

在該響應我創建測試數據陣列，因爲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/