javascript - 使用动态 HTML 页面在 JavaScript 中打开窗口

Question

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

• 打开的窗口每行必须有 2 张卡片。(取决于隐藏的表格)，
• 喜欢 - 如果在我的隐藏表 (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(卡片)将根据隐藏表行的数量出现在新窗口中，(如果 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/