纯js做打印功能无需插件,使用localStorage做缓存(有图有代码)

纯js做打印功能无需插件,使用localStorage做缓存(有图有代码)

纯js做打印功能无需插件,使用localStorage做缓存(有图有代码)

<div class='row' style="position: relative;">
<input type="button" onclick="doPrint()" value="打印"/>
<input type="button" onclick="choose()" value="选择打印的字段"/>
<div id="choose" style="display: none;position: absolute;left: 175px;top:33px;z-index: 9;box-shadow: 0 0 30px #E7E7E7;">
<div class="xunzk" style="background-color: #fff;">
<#list newlist as list>
<label><input name="choosefield" type="checkbox" class="${queryKind.dquerykind}${list.dfieldname}"
   value="${list.dfieldname}" /><span id="${list.dfieldname}">${list.ddisplayname}</span></label>
</#list>
</div>
//获取缓存中选中的项
$(document).ready(function() {    
    for(var i=0; i<localStorage.length;i++){
       if (localStorage.getItem(localStorage.key(i)) == "1") {
          $("."+localStorage.key(i)).prop("checked", true);
       }
    }
});
function doPrint() {
   var htmlths="";
   var htmltds="";
   var pageSize = $(".page-size")[0].firstChild.data;
   var pageNumber = $(".page-number.active a").text();
   var dmenu = $("#dmenu").val();
   var dqueryname = '${queryKind.dqueryname}';
   var dquerykind = '${queryKind.dquerykind}';
   var size="${simSize}";
   var symbol = "";
  
   symbol = symbol.substring(0,symbol.length-1);
   var id = document.getElementsByName('choosefield');
   var valueName = new Array();
   var valueId = new Array();
   for(var i = 0; i < id.length; i++){
      if(id[i].checked){
         valueName.push(id[i].value)
         valueId.push($("#"+id[i].value).html());
         localStorage.setItem(dquerykind+id[i].value, "1");
      }else{
         localStorage.removeItem(dquerykind+id[i].value);
      }
   }
   for(var i=0;i<valueId.length;i++){
      var htmlth = "<th style='text-align: center'>"+valueId[i]+"</th>"
      htmlths = htmlth+ htmlths;
   }
   $.ajax({
      type: 'POST',
      dataType: 'json',
      async:false,
      data: {"symbol": symbol,"sdmenu": dmenu,"rows": pageSize,"page":pageNumber},
      url: '${base}/weipu/querytongyong/print',
      success: function (data) {
         if(data.status=="success"){
            var ListData = data.rows;
            for(var i = 0; i < ListData.length; i++) {
                    var htmltd1 ="";
                for(var j=0;j<valueName.length;j++){
                  var fieldname = valueName[j];
                  if(fieldname.indexOf("DDATE") != -1){
                            var date = new Date(ListData[i][fieldname]).Format("yyyy-MM-dd");
                            var htmltd="<td style='text-align: center'>"+date+"</td>"
                        }else{
                     var namevalue = ListData[i][fieldname];
                     if (namevalue == undefined){
                        var htmltd="<td style='text-align: center'>0</td>"
                     }else{
                        var htmltd="<td style='text-align: center'>"+namevalue+"</td>"
                     }
                        }
                        htmltd1 = htmltd + htmltd1;
               }
               var htmltb2 ="<tr style='line-height: 25px;'>"
                          +htmltd1
                          +"</tr>"
               htmltds = htmltds + htmltb2;
            }
         }else{
            return;
         }
      }
   });
//拼接html,一定要是完整的html
   var html =  "<!DOCTYPE html>"
            +"<html>"
            +"<head>"
            +"<meta charset='utf-8'/>"
            +"<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />"
            +"</head>"
            +"<body>"
            +"<div>"
            +"<h3  style='text-align: center'>"+dqueryname+"</h3 >"
            +"<table  border='1' style='width: 100%;'>"
            +"<thead style='line-height: 40px;'>"
            +"<tr style='line-height: 25px;'>"
            +htmlths
            +"</tr>"
            +"</thead>"
            +"<tbody id='paramsTb1'>"
            +htmltds
            +"</tbody>"
            +"</table>"
            +"</div>"
            +"</body>"
            +"</html>";

    bdhtml = html;
    startstr = "<div >";截取开始字段
    endstr = "</div>";截取结束字段
    prnhtml = bdhtml.substr(bdhtml.indexOf(startstr) + 172);//数字根据需要需改
    prnhtml = prnhtml.substring(0, prnhtml.indexOf(endstr));

    window.document.body.innerHTML = prnhtml;
    window.print();
    window.document.body.innerHTML = bdhtml;
}