纯js做打印功能无需插件，使用localStorage做缓存（有图有代码）

怼烎@ 2022-01-29 01:29 195阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDEwNzk1_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDEwNzk1_size_16_color_FFFFFF_t_70 1][]

<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;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDEwNzk1_size_16_color_FFFFFF_t_70]: /images/20220129/abaae63416f448a5b7474a582e8ff176.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDEwNzk1_size_16_color_FFFFFF_t_70 1]: /images/20220129/7fa83274e3584a19984f087452a71c5c.png