使用动态 HTML 页面在 JavaScript 中打开 window

Question

如何在 JavaScript 中打开一个新的 window 并插入 HTML 数据和动态内容值，最后打印打开的 window 页面。

打开window必须每行2张牌。（取决于隐藏table），
like - 打开 window 如果在我的隐藏 table(tblPrintCards) 中有 1 或 2 行 2 身份证 (HTML CODE) 在单行中。

我的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（卡片）将以新的 window 形式出现，基于编号。隐藏的 table 行，（如果 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>

样本打开新寡妇形象是：

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/

使用动态 HTML 页面在 JavaScript 中打开 window

Open window in JavaScript with Dynamic HTML page

html

javascript

jquery

javascript-events