前端利用 js-xlsx 實現 Excel 文件導入導出功能

前端代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>自定義派單 - Powered By </title>
  <link href="${base}/template/admin/js/eayyui132/themes/icon.css" rel="stylesheet" type="text/css" />
  <link href="${base}/template/admin/js/eayyui132/themes/default/easyui.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="${base}/template/admin/js/eayyui132/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="${base}/template/admin/js/eayyui132/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${base}/template/admin/js/eayyui132/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript" src="${base}/template/admin/js/ajaxfileupload.js"></script>
        <script type="text/javascript" src="${base}/template/admin/js/report.js"></script>
  


  <script type="text/javascript" src="${base}/template/admin/js/datagridSelectCascade.js"></script>

  <script type="text/javascript" src="${base}/template/common/datePicker/WdatePicker.js"></script>
  <script type="text/javascript" src="${base}/template/admin/js/jsXlsx/xlsx.full.min.js"></script>

</head>
<body style="width:100%;height:100%">
<div style="width:100%;position:absolute;bottom:30px;top:0;left:0">
<table id="clientGrid" class="easyui-datagrid" style="padding:5px;" toolbar="#toolbar" fit="true" rownumbers="true" fitColumns="true" singleSelect="true" >
  <thead>
  <tr>
    <th sortable="true" data-options=" halign:'center',field:'city_ID',formatter:isNull">本地網標識</th>
    <th sortable="true" data-options=" halign:'center',field:'hd_ID',formatter:isNull">活動ID</th>
    <th sortable="true" data-options=" halign:'center',field:'hd_NAME',formatter:isNull">活動名稱</th>
    <th sortable="true" data-options=" halign:'center',field:'hd_ST_DATE',formatter:isNull">活動開始時間</th>
    <th sortable="true" data-options=" halign:'center',field:'hd_ED_DATE',formatter:isNull">活動結束時間</th>
    <th sortable="true" data-options=" halign:'center',field:'connectno',formatter:isNull">接入號</th>
    <th sortable="true" data-options=" halign:'center',field:'client_MARK',formatter:isNull">客戶標識</th>
    <th sortable="true" data-options=" halign:'center',field:'regional_PIC',formatter:isNull">片區(qū)負責人工號</th>
    <th sortable="true" data-options=" halign:'center',field:'main_COMMEND_NAME',formatter:isNull">主推薦名稱</th>
    <th sortable="true" data-options=" halign:'center',field:'main_COMMEND_INTRO',formatter:isNull">主推推薦簡介</th>
    <th sortable="true" data-options=" halign:'center',field:'sale_INFO',formatter:isNull">營銷建議</th>
    <th sortable="true" data-options=" halign:'center',field:'main_COMMEND_TYPE',formatter:isNull">主推推薦類型</th>
    <th sortable="true" data-options=" halign:'center',field:'sc_COMMEND_NAME',formatter:isNull">次推推薦名稱</th>
    <th sortable="true" data-options=" halign:'center',field:'sc_COMMEND_INTRO',formatter:isNull">次推推薦簡介</th>
    <th sortable="true" data-options=" halign:'center',field:'sc_COMMEND_TYPE',formatter:isNull">次推推薦類型</th>
    <th sortable="true" data-options=" halign:'center',field:'ds_COMMEND_NAME',formatter:isNull">順銷推薦名稱</th>
    <th sortable="true" data-options=" halign:'center',field:'ds_COMMEND_INTRO',formatter:isNull">順銷推薦簡介</th>
    <th sortable="true" data-options=" halign:'center',field:'ds_COMMEND_TYPE',formatter:isNull">順銷推薦類型</th>

  </tr>
  </thead>
</table>
        </div>

    <div id="pp" class="easyui-pagination" style="border:1px solid #ccc;position:fixed;bottom:0;right:0;left:0;background-color:#fff" data-options="  
            total: 0,  
            pageList: [50,100,200],  
                onSelectPage: function(pageNumber, pageSize){ // 頁面切換動作  
                    getDataByPageRows(pageNumber,pageSize);     
            }">
        </div>

<div id="toolbar">
  <div>
    <label class="textStyle ">工單創(chuàng)建時間段:</label>
    <input id="staTime" style="width:110px " class="easyui-text " name="staTime"  onclick="WdatePicker({dateFmt: 'yyyy-MM-dd'}) " " />
    <label class="textStyle">--</label>
    <input id="overTime" style="width:110px" class="easyui-text" name="overTime"  onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" />

    <a href="#" onclick="searchEnd();" class="easyui-linkbutton" plain="true" icon="icon-search">查詢</a>
    <a href="#" id="export" onclick="clientExport()" class="easyui-linkbutton" plain="true" icon="icon-print">導出</a>
    <a href="#" onclick="exportExcel(jsono)" class="easyui-linkbutton" iconCls="icon-selectAll" plain="true">模板下載</a>
    <a href="" download="自定義派單.xlsx" id="hf"></a>
    <a href="#" onclick="importDataModel()" class="easyui-linkbutton" iconCls="icon-add" plain="true">批量導入</a>

  </div>
</div>


<!-- 導入數據模塊 -->
<div id="importDataTable" class="easyui-window" title="導入信息" style="width:980px;height:510px; padding:2px;" data-options="modal:true, collapsible:false, minimizable:false,maximizable:true,closed:true,onMaximize:function(){MaximizeImport()},onRestore:function(){MaximizeImport()}">

  <div style="width:100%;height:100%;" data-options="fit:true">
    <div id="tb3" style="padding:4px 10px;">
      <input type="hidden" id="inputID" />
      <a href="#" onclick="chooseFile()" class="easyui-linkbutton" type="file" icon="icon-add">選擇文件導入</a>
        <form action="custom_dispatch_order!checkExport.action" method='post' onsubmit="return exportCheckResult();" style="position:relative;margin-top:-28px;margin-left:120px;width:70px">
                <input type="text" value="[]" id="exportData" name="exportData" style="visibility:hidden;position:fixed" />
                <input type="submit" value="導出檢驗結果" class="easyui-linkbutton" plain="true" icon="icon-print" style="width:95px;height:23px;" id ="exportCheckBtn"/>
            </form>
    </div>
    <table id="showImportinfo" class="easyui-datagrid" data-options="toolbar:'#tb3',fit:true,fitColumns:false,scrollbarSize:10,pagination:true" rownumbers="true">
      <thead>
      <tr>
        <th data-options="align:'center',field:'HD_NAME',width:140">活動名稱</th>
        <th data-options="align:'center',field:'HD_ST_DATE',width:140 ,formatter:crtTimeFtt" >活動開始時間</th>
        <th data-options="align:'center',field:'HD_ED_DATE',width:140 ,formatter:crtTimeFtt">活動結束時間</th>
        <th data-options="align:'center',field:'CONNECTNO',width:140">接入號</th>
        <th data-options="align:'center',field:'MAIN_COMMEND_NAME',width:110">主推薦名稱</th>
        <th data-options="align:'center',field:'MAIN_COMMEND_INTRO',width:110">主推推薦簡介</th>
        <th data-options="align:'center',field:'SALE_INFO',width:110">營銷建議</th>
        <th data-options="align:'center',field:'MAIN_COMMEND_TYPE',width:110">主推推薦類型</th>
        <th data-options="align:'center',field:'SC_COMMEND_NAME',width:100">次推推薦名稱</th>
        <th data-options="align:'center',field:'SC_COMMEND_INTRO',width:100">次推推薦簡介</th>
        <th data-options="align:'center',field:'SC_COMMEND_TYPE',width:120">次推推薦類型</th>
        <th data-options="align:'center',field:'DS_COMMEND_NAME',width:100">順銷推薦名稱</th>
        <th data-options="align:'center',field:'DS_COMMEND_INTRO',width:120">順銷推薦簡介</th>
        <th data-options="align:'center',field:'DS_COMMEND_TYPE',width:120">順銷推薦類型</th>
        <th data-options="align:'center',field:'checkResult',width:110,formatter:chenkInfo">校驗結果</th>
        <th data-options="align:'center',field:'something'">備注</th>
      </tr>
      </thead>
    </table>
  </div>
</div>
</div>
</div>

<#--選擇文件上傳窗口-->
  <div id="uploadFileWin" class="easyui-window" title="選擇文件" style="width:650px;height:260px" data-options="modal:true,minimizable:false,maximizable:false,closed: true">
    <div style="padding:10px;">
      <table class="inputTable">
        <tr>
          <th>
            上傳文件:
          </th>
          <td>
            <input type="file" name="uploadFile" id="uploadFile" onchange="importf(this)"/>
          </td>
        </tr>
        <tr>
          <th>
            文件格式說明:
          </th>
          <td style="color:#999;">
            <label class="requireField" color="red"> <span  color="red"> 1、文件格式必須為Excel2007模板文件,請勿修改模板格式  </span></br>
              <span  color="red"> 2、如果文件為Excel2003格式(擴展名  .xls),請打開文件,然后另存為Excel2007(擴展名 .xlsx) </span></br>
              <span  color="red">3、文檔前綴名稱不能修改,只能修改日期 </span>
            </label>
          </td>
        </tr>
      </table>
    </div>
    <div class="buttonArea" align="center" style="margin-top:20px;">
      <input type="button" id="submitForm" onclick="submitList()" class="formButton" value="確  定" hidefocus />
    </div>
  </div>

</body>

<script type="text/javascript">
  var excelData;//excel數據
  var checkInfo;//校驗結果
  var wb;//讀取完成的數據
  var tableCheck;//界面檢驗結果
  var successfulData=[];//檢驗成功的數據
  var errorData=[];//檢驗失敗的數據
  var rABS = false; //是否將文件讀取為二進制字符串
  var defauleSelectCount=50;
  function MaximizeImport() {
    var pWid = $('#importDataTable').innerWidth(),
      phgt = $('#importDataTable').innerHeight();

    $('#showImportinfo, #showCheckDatainfo').datagrid({
      width: '100%',
      height: '100%'
    });
  }

  //打開上傳文件的窗口
  function chooseFile() {
    $("#uploadFileWin").window("open");
  }


  function importf(obj) {//導入
    if (!obj.files) {
      return;
    }
    var f = obj.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
      var data = e.target.result;
      if (rABS) {
        wb = XLSX.read(btoa(fixdata(data)), {//手動轉化
          type: 'base64'
        });
      } else {
        wb = XLSX.read(data, {
          type: 'binary'
        });
      }
      excelData = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
      excelData = excelData.replace(/活動名稱/g, "HD_NAME").replace(/活動開始時間/g, "HD_ST_DATE").replace(/活動結束時間/g, "HD_ED_DATE").replace(/接入號/g, "CONNECTNO").replace(/主推薦名稱/g, "MAIN_COMMEND_NAME").replace(/主推推薦簡介/g, "MAIN_COMMEND_INTRO").replace(/營銷建議/g, "SALE_INFO").replace(/主推推薦類型/g, "MAIN_COMMEND_TYPE").replace(/次推推薦名稱/g, "SC_COMMEND_NAME").replace(/次推推薦簡介/g, "SC_COMMEND_INTRO").replace(/次推推薦類型/g, "SC_COMMEND_TYPE").replace(/順銷推薦名稱/g, "DS_COMMEND_NAME").replace(/順銷推薦簡介/g, "DS_COMMEND_INTRO").replace(/順銷推薦類型/g, "DS_COMMEND_TYPE")
      excelData = eval("(" + excelData + ")");
      console.log(excelData);

      successfulData=[];//檢驗成功的數據
      errorData=[];//檢驗失敗的數據
    };
    if (rABS) {
      reader.readAsArrayBuffer(f);
    } else {
      reader.readAsBinaryString(f);
    }
  }

  //提交上傳文件
  function submitList() {
    successfulData=[];
    errorData=[];//清空
    var cityId = window.location.pathname.substring(window.location.pathname.indexOf('Radar-') + 6, window.location.pathname.indexOf('Radar-') + 9) +"000000";
    var CONNECTNO = "";//接入號
    var HD_NAME = "";//活動名稱
    for(var i=0;i<excelData.length;i++){
      CONNECTNO+=excelData[i].CONNECTNO +",";
      HD_NAME+=excelData[i].HD_NAME +",";
    }
    $.post('custom_dispatch_order!checkImportInfo.action', {
      city: cityId,
      connectNo:CONNECTNO.substring(0,CONNECTNO.length-1),
      hdName:HD_NAME.substring(0,HD_NAME.length-1)
    },function(data){
      checkInfo = eval("(" + data + ")");
      console.log(checkInfo);
      var result="";
      console.log(excelData);
      for(var i=0;i < excelData.length;i++){
       result="";
       excelData[i].checkResult='校驗成功'
        excelData[i].HD_ST_DATE = crtTimeFtt(excelData[i].HD_ST_DATE);//時間格式化
        excelData[i].HD_ED_DATE = crtTimeFtt(excelData[i].HD_ED_DATE);
        if(excelData[i].HD_NAME == null || excelData[i].HD_NAME == ' '||excelData[i].HD_NAME == ''||excelData[i].HD_NAME == 'null' ||excelData[i].HD_NAME == undefined ){
          excelData[i].checkResult='校驗失敗';
          result += '活動名稱為空、';
        }
        //活動開始時間不為空且是日期格式跳出if
        if(isNaN(Date.parse(excelData[i].HD_ST_DATE))){
          excelData[i].checkResult='校驗失敗';
          result += '活動開始時間不能為空并且格式需要正確、';
        }
        //活動結束時間不為空且是日期格式跳出if
        if(isNaN(Date.parse(excelData[i].HD_ED_DATE))){
          excelData[i].checkResult='校驗失敗';
          result += '活動結束時間不能為空并且格式需要正確、';
        }
        //接入號
        if(excelData[i].CONNECTNO ==undefined || excelData[i].CONNECTNO == null || excelData[i].CONNECTNO == ' ' ||excelData[i].CONNECTNO == '' ||excelData[i].CONNECTNO == 'null' ) {
          excelData[i].checkResult='校驗失敗';
          result += '接入號不能為空、';
        }
        if(checkInfo.data[i].connectNo=='false'){
          excelData[i].checkResult='校驗失敗';
          result += '請檢查接入號輸入是否正確、';
        }
        //主推薦名稱
        if(excelData[i].MAIN_COMMEND_NAME==undefined ||excelData[i].MAIN_COMMEND_NAME == null || excelData[i].MAIN_COMMEND_NAME == ' '|| excelData[i].MAIN_COMMEND_NAME == ''|| excelData[i].MAIN_COMMEND_NAME == 'null' ) {
          excelData[i].checkResult='校驗失敗';
          result += '主推薦名稱不能為空、';
        }
        //主推推薦簡介
        if(excelData[i].MAIN_COMMEND_INTRO == undefined || excelData[i].MAIN_COMMEND_INTRO == null || excelData[i].MAIN_COMMEND_INTRO == ' '|| excelData[i].MAIN_COMMEND_INTRO == ''|| excelData[i].MAIN_COMMEND_INTRO == 'null' ) {
          excelData[i].checkResult='校驗失敗';
          result += '主推推薦簡介不能為空、';
        }
        //判斷該接入號是否屬于該地市
        if(checkInfo.data[i].isCurrentCity=='false'){
          excelData[i].checkResult='校驗失敗';
          result += '改接入號不屬于當前的地市、';
        }
        excelData[i].checkResult == '校驗失敗'?errorData.push(excelData[i]):successfulData.push(excelData[i]);
     

        excelData[i].something = result.substring(0,result.length-1);
      }

      $('#showImportinfo').datagrid('reload');
      $('#showImportinfo').datagrid('loadData', excelData);
      importData();//插入檢驗成功的數據
      $("#uploadFileWin").window("close");
    });

  }

  var jsono = [{ //導出模板數據
    "活動名稱": "必填",
    "活動開始時間": "必填(格式為:2018-10-15 00:00:00)",
    "活動結束時間": "必填(格式為:2018-10-15 00:00:00)",
    "接入號": "必填",
    "主推薦名稱": "必填",
    "主推推薦簡介": "必填",
    "營銷建議": "",
    "主推推薦類型": "",
    "次推推薦名稱": "",
    "次推推薦簡介": "",
    "次推推薦類型": "",
    "順銷推薦名稱": "",
    "順銷推薦簡介": "",
    "順銷推薦類型": ""
  }];
  var tmpDown; //導出的二進制對象
  function exportExcel(json, type) {
    var tmpdata = json[0];
    json.unshift({});
    var keyMap = []; //獲取keys
    //keyMap =Object.keys(json[0]);
    for (var k in tmpdata) {
      keyMap.push(k);
      json[0][k] = k;
    }
    var tmpdata = [];//用來保存轉換好的json
    json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
      v: v[k],
      position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
    }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
      v: v.v
    });
    var outputPos = Object.keys(tmpdata); //設置區(qū)域,比如表格從A1到D10
    var tmpWB = {
      SheetNames: ['mySheet'], //保存的表標題
      Sheets: {
        'mySheet': Object.assign({},
          tmpdata, //內容
          {
            '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //設置填充區(qū)域
          })
      }
    };
    tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
      {bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}//這里的數據是用來定義導出的格式類型
    ))], {
      type: ""
    }); //創(chuàng)建二進制對象寫入轉換好的字節(jié)流
    var href = URL.createObjectURL(tmpDown); //創(chuàng)建對象超鏈接
    document.getElementById("hf").href = href; //綁定a標簽
    document.getElementById("hf").click(); //模擬點擊實現下載
    setTimeout(function() { //延時釋放
      URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()來釋放這個object URL
    }, 100);
  }

  function s2ab(s) { //字符串轉字符流
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
  // 將指定的自然數轉換為26進制表示。映射關系:[0-25] -> [A-Z]。
  function getCharCol(n) {
    let temCol = '',
      s = '',
      m = 0
    while (n > 0) {
      m = n % 26 + 1
      s = String.fromCharCode(m + 64) + s
      n = (n - m) / 26
    }
    return s
  }



  //導出檢驗結果
  function exportCheckResult() {
     $.messager.alert("提示", "導出校驗結果成功"); 
  }



  //判斷時間格式
  String.prototype.isDate = function() {

    var r = this.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
    var r1 = this.match(/^(\d{1,4})(-|\/)(\d{1,1})\2(\d{1,2})$/);
    var r2 = this.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,1})$/);
    var r3 = this.match(/^(\d{1,4})(-|\/)(\d{1,1})\2(\d{1,1})$/);

    if(r == null || r1 != null || r2 != null || r3 != null) {
      return false;
    } else {
      var d = new Date(r[1], r[3] - 1, r[4]);
      return(d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]);
    }
  };

  //到期日期轉換
  function formatRes(value, row, index) {
    var expireDate = row.expireDate;//到期日期
    var result;

    if(expireDate == '2099-01-01 00:00:00.0'){
      result = '';
    }
    return result;
  }



  //驗證時分秒
  String.prototype.isTime = function()
  {
    var r = this.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
    if(r==null)return false; var d = new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
    return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
  };

  //導出客戶信息(條件導出)
  function clientExport() {

        location.href = "custom_dispatch_order!searchOrderInfo.action?strTime="+$("#staTime").attr("value")+"&endTime="+$("#overTime").attr("value")+"&staPosition=0&endPosition=0&type=1";



  }


  function importData(){
    console.log(successfulData);
                    Load();
    $.post('custom_dispatch_order!importInfo.action', {
      importData: JSON.stringify(successfulData)
    },function(data){
        dispalyLoad();
       $("#exportData").val(JSON.stringify(excelData))
       $.messager.alert("提示", "導入成功的有"+successfulData.length+"條數據,導入失敗的有"+errorData.length+"條數據");
  
    });
  }










  //查詢按鈕
  function searchEnd() {
                Load();
  $.post('custom_dispatch_order!searchOrderInfo.action', {
      strTime: $("#staTime").attr("value"),
      endTime: $("#overTime").attr("value"),
      staPosition: 0,
      endPosition: defauleSelectCount,
      type:0
    },function(data){
    dispalyLoad();
     jsonObj = eval("(" + data + ")");
     console.log(jsonObj);
     $('#pp').pagination({
        total: jsonObj.count,
        pageNumber: 1,
        });
    $('#clientGrid').datagrid('reload');
    $('#clientGrid').datagrid('loadData', jsonObj.data);    
    });


  }
  
  function getDataByPageRows(pageNum, rowsLimit) {
             defauleSelectCount=rowsLimit;
                var infoMarketInfo = null; //表格的數據
            
                $("#clientGrid").datagrid("loadData", {
                    total: 0,
                    rows: []
                });
                Load();
                $.post("custom_dispatch_order!searchOrderInfo.action", {
                        staTime: $("#staTime").attr("value"),
                        endTime: $("#overTime").attr("value"),
                        staPosition: (pageNum-1) * rowsLimit,
                        endPosition: pageNum * rowsLimit,
                        type: 0
                    },
                    function(data) {
                        dispalyLoad();
                            jsonObj = eval("(" + data + ")");
                            console.log(jsonObj);
                            $('#clientGrid').datagrid('reload');
                            $('#clientGrid').datagrid('loadData', jsonObj.data);                

                    });

            }






  //導入模塊彈窗
  function importDataModel() {
    //清空表格導入和校驗的數據
    $('#showImportinfo').datagrid('loadData',{total:0,rows:[]});
    $('#showCheckDatainfo').datagrid('loadData',{total:0,rows:[]});
    //導入、校驗、信息生成必須按順序操作否則不能成功
    $('input[id="inputID"]').val(2);
    //導入前禁用校驗、信息生成、導出校驗結果以及修改樣式
    $('#bufe').prop("disabled",true);
    $("#bufe").css({"color":"white","background":"#D3D3D3"});
    $("#importDataTable").window("open");
  }

  //日期時間格式化
  function formatDate(value) {
    if(isNaN(value) && !isNaN(Date.parse(value))) {
      var date = new Date(value);
      return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    } else {
      return value;
    }
  }
  //創(chuàng)建時間格式化顯示
function crtTimeFtt(value){
   var crtTime = new Date(value);
   var time = value!=undefined?dateFtt("yyyy-MM-dd hh:mm:ss",crtTime):value;
   return time;     
}
  
  function dateFtt(fmt,date)   
{   
  var o = {   
    "M+" : date.getMonth()+1,                 //月份   
    "d+" : date.getDate(),                    //日   
    "h+" : date.getHours(),                   //小時   
    "m+" : date.getMinutes(),                 //分   
    "s+" : date.getSeconds(),                 //秒   
    "q+" : Math.floor((date.getMonth()+3)/3), //季度   
    "S"  : date.getMilliseconds()             //毫秒   
  };   
  if(/(y+)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));   
  for(var k in o)   
    if(new RegExp("("+ k +")").test(fmt))   
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
  return fmt;   
}

function chenkInfo(value){
if(value!='校驗失敗'){
  return "校驗成功";
 }else{
 return value;
 }
 

}

function isNull(value){
if(value=='null' || value ==null || value==undefined){
return "";
}else{
return value;
}

}


</script>

</html>

后端代碼

package net.radar.action.admin;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;

import javax.annotation.Resource;

import net.radar.bean.ResponsePage;
import net.radar.entity.DispatchOrder;
import net.radar.entity.PermissionCascade;
import net.radar.service.AdminService;
import net.radar.service.CustomDispatchOrderService;
import net.radar.service.PermissionCascadeService;
import net.radar.util.DateOpUtil;
import net.radar.util.JsonUtil;
import net.radar.util.SpringUtil;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
import net.sf.json.JSONArray;

import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.struts2.convention.annotation.ParentPackage;



@ParentPackage("admin")
public class CustomDispatchOrderAction extends BaseAdminAction {
    private static final long serialVersionUID = 1L;
    private String company;
    private String serviceCenter;
    private String area;
    private String city;
    private String keyid;
    private String grid;
    private String hdName;
    private String connectNo;
    private String strTime;
    private String endTime;
    private String type;
    private String staPosition;
    private String endPosition;
    private String exportData;

    private String importData;

    @Resource(name = "CustomDispatchOrderServiceImpl")
    private CustomDispatchOrderService customDispatchOrderService;
    
    @Resource(name = "adminServiceImpl")
    private AdminService adminService;


    public String list() {
        return LIST;
    }

    // 查詢派單信息
    public String searchOrderInfo() {
        Map<String, Object> map = customDispatchOrderService.searchOrderInfo(strTime, endTime,type,staPosition,endPosition);
        if(Integer.parseInt(type)==1){
            String result = JsonUtil.toJson(map);
            ReportExportAction tt = new ReportExportAction();
            JSONObject jsStr = JSONObject.fromObject(result);
            String expertInfo = jsStr.get("data").toString();
            tt.customDispatchOrderExport(expertInfo);
        }
         return ajax(JsonUtil.toJson(map));
    }

    public String checkImportInfo() {
        Map<String, Object> map = new HashMap<String, Object>();
        String[] actNameArray = hdName.split(",");
        String[] connectNoArray = connectNo.split(",");

        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();

        for (int i = 0; i < actNameArray.length; i++) {
            Map<String, Object> obj = new HashMap<String, Object>();
            // 判斷活動名稱是否為空則插入數據
             customDispatchOrderService.isCheckActName(actNameArray[i]);
            
            // 判斷接入號是否存在
            if (connectNoArray[i] == null || "null".equalsIgnoreCase(connectNoArray[i])
                    || "undefined".equalsIgnoreCase(connectNoArray[i]) || "".equalsIgnoreCase(connectNoArray[i])) {
                obj.put("connectNo", "flase");
                obj.put("isCurrentCity", "flase");// 接入號為空,則改派單也不屬于當前地市
            } else {
                String result = customDispatchOrderService.isCheckConnectNo(connectNoArray[i]);
                if (result == "true") {
                    // 判斷該派單所屬地市
                    String orderCity = customDispatchOrderService.getCity(connectNoArray[i]);
                    if (orderCity.equals(city)) {
                        obj.put("isCurrentCity", "true");
                    } else {
                        obj.put("isCurrentCity", "flase");
                    }
                }
                obj.put("isCurrentCity", "flase");// 接入號查詢不存在flase
                obj.put("connectNo", result);
            }

            list.add(obj);
        }

        map.put("data", list);

        return ajax(JsonUtil.toJson(map));
    }
    
    // 插入派單信息
        public void importInfo() {
            JSONArray jsonArray = JSONArray.fromObject(importData);
            @SuppressWarnings({ "unchecked", "rawtypes" })
            List<Map<String, Object>> mapListJson = (List) jsonArray;
            for (int i = 0; i < mapListJson.size(); i++) {
                Map<String, Object> obj = mapListJson.get(i);
                DispatchOrder  dispatchOrder = (DispatchOrder) JSONObject.toBean(
                        (JSONObject) obj, new DispatchOrder().getClass());
                //根據接入號查詢網格ID,再查詢網格ID的所有父節(jié)點
                List<PermissionCascade> allDirectParentNode = customDispatchOrderService.getAllDirectParentNodeNew(dispatchOrder.getCONNECTNO());
                //根據活動名稱查新活動ID
                String HD_ID = customDispatchOrderService.getHdId(dispatchOrder.getHD_NAME());
                dispatchOrder.setHD_ID(HD_ID);
                for (int j = 0; j < allDirectParentNode.size(); j++) {
                    PermissionCascade p = allDirectParentNode.get(j);
                    switch(p.getGrade()){
                    case 5: //網格
                        dispatchOrder.setGRID_ID(p.getId());
                        break;
                    case 4://片區(qū)
                        dispatchOrder.setAREA_ID(p.getId());
                        String name  = p.getName();
                       if(name.equals("未劃分片區(qū)")){
                            dispatchOrder.setREGIONAL_PIC("");//片區(qū)負責人
                       }else{
                            dispatchOrder.setREGIONAL_PIC(p.getId());//片區(qū)負責人
                       }
                        break;
                    case 3://營服
                        dispatchOrder.setBRANCH_ID(p.getId());
                        break;
                    case 2://縣份
                        dispatchOrder.setSUBST_ID(p.getId());
                        break;
                    case 1://地市
                        dispatchOrder.setCITY_ID(p.getId());
                        break;
                     default:
                         dispatchOrder.setPROV_ID("1");
                        break;
                    }
                }

                dispatchOrder.setKEYID(Long.toString(DateOpUtil.randomTimestampId()));//keyId
                dispatchOrder.setORDER_CODE("201"+Long.toString(DateOpUtil.randomTimestampId()));//keyId
                dispatchOrder.setORDER_TYPE("1");//工單類型為1
                dispatchOrder.setORDER_STATE("1");//工單狀態(tài)為1
                dispatchOrder.setORDER_PROCESSING_STATE("1");//工單處理狀態(tài)為1
                //根據接入號查詢客戶標識
                String clientMark = customDispatchOrderService.getClientMark(dispatchOrder.getCONNECTNO());
                dispatchOrder.setCLIENT_MARK(clientMark);//工單處理狀態(tài)為1
                AdminService adminServiceImpl = (AdminService) SpringUtil
                        .getBean("adminServiceImpl");
                String loginUserId =  adminServiceImpl.getLoginAdmin().getId();
                dispatchOrder.setUSER_ID(loginUserId);
                //插入數據
                customDispatchOrderService.insertOrder(dispatchOrder);

            }
    

        
        }
        //導出檢驗結果
        public String checkExport() {
            ReportExportAction tt = new ReportExportAction();
            tt.checkResultExport(exportData);
            return ajax("導出成功");
            
        }


    public String getCompany() {
        return company;
    }

    public void setCompany(String company) {
        this.company = company;
    }

    public String getServiceCenter() {
        return serviceCenter;
    }

    public void setServiceCenter(String serviceCenter) {
        this.serviceCenter = serviceCenter;
    }

    public String getArea() {
        return area;
    }

    public void setArea(String area) {
        this.area = area;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public String getKeyid() {
        return keyid;
    }

    public void setKeyid(String keyid) {
        this.keyid = keyid;
    }

    public String getGrid() {
        return grid;
    }

    public void setGrid(String grid) {
        this.grid = grid;
    }

    
    public String getHdName() {
        return hdName;
    }

    public void setHdName(String hdName) {
        this.hdName = hdName;
    }

    public String getConnectNo() {
        return connectNo;
    }

    public void setConnectNo(String connectNo) {
        this.connectNo = connectNo;
    }

    public String getStrTime() {
        return strTime;
    }

    public void setStrTime(String strTime) {
        this.strTime = strTime;
    }

    public String getEndTime() {
        return endTime;
    }

    public void setEndTime(String endTime) {
        this.endTime = endTime;
    }

    public String getImportData() {
        return importData;
    }

    public void setImportData(String importData) {
        this.importData = importData;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getStaPosition() {
        return staPosition;
    }

    public void setStaPosition(String staPosition) {
        this.staPosition = staPosition;
    }

    public String getEndPosition() {
        return endPosition;
    }

    public void setEndPosition(String endPosition) {
        this.endPosition = endPosition;
    }

    public String getExportData() {
        return exportData;
    }

    public void setExportData(String exportData) {
        this.exportData = exportData;
    }

    
}

導出功能(2)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <button onclick="downloadExl(jsono)">導出</button>
    <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
    <!--調用FileSaver saveAs函數可以實現文件下載-->
    <!--<script src="http://sheetjs.com/demos/Blob.js"></script>
    <script src="http://sheetjs.com/demos/FileSaver.js"></script>-->
    <script>
        //如果使用 FileSaver.js 就不要同時使用以下函數
        function saveAs(obj, fileName) {//當然可以自定義簡單的下載文件實現方式 
            var tmpa = document.createElement("a");
            tmpa.download = fileName || "下載";
            tmpa.href = URL.createObjectURL(obj); //綁定a標簽
            tmpa.click(); //模擬點擊實現下載
            setTimeout(function () { //延時釋放
                URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL
            }, 100);
        }
        var jsono = [{ //測試數據
            "保質期臨期預警(天)": "adventLifecycle",
            "商品標題": "title",
            "建議零售價": "defaultPrice",
            "高(cm)": "height",
            "商品描述": "Description",
            "保質期禁售(天)": "lockupLifecycle",
            "商品名稱": "skuName",
            "商品簡介": "brief",
            "寬(cm)": "width",
            "阿達": "asdz",
            "貨號": "goodsNo",
            "商品條碼": "skuNo",
            "商品品牌": "brand",
            "凈容積(cm^3)": "netVolume",
            "是否保質期管理": "isShelfLifeMgmt",
            "是否串號管理": "isSNMgmt",
            "商品顏色": "color",
            "尺碼": "size",
            "是否批次管理": "isBatchMgmt",
            "商品編號": "skuCode",
            "商品簡稱": "shortName",
            "毛重(g)": "grossWeight",
            "長(cm)": "length",
            "英文名稱": "englishName",
            "凈重(g)": "netWeight",
            "商品分類": "categoryId",
            "這里超過了": 1111.0,
            "保質期(天)": "expDate"
        }];
        const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };//這里的數據是用來定義導出的格式類型
        // const wopts = { bookType: 'csv', bookSST: false, type: 'binary' };//ods格式
        // const wopts = { bookType: 'ods', bookSST: false, type: 'binary' };//ods格式
        // const wopts = { bookType: 'xlsb', bookSST: false, type: 'binary' };//xlsb格式
        // const wopts = { bookType: 'fods', bookSST: false, type: 'binary' };//fods格式
        // const wopts = { bookType: 'biff2', bookSST: false, type: 'binary' };//xls格式

        function downloadExl(data, type) {
            const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
            wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(data);//通過json_to_sheet轉成單頁(Sheet)數據
            saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), "這里是下載的文件名" + '.' + (wopts.bookType=="biff2"?"xls":wopts.bookType));
        }
        function s2ab(s) {
            if (typeof ArrayBuffer !== 'undefined') {
                var buf = new ArrayBuffer(s.length);
                var view = new Uint8Array(buf);
                for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                return buf;
            } else {
                var buf = new Array(s.length);
                for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
                return buf;
            }
        }
    </script>
</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,716評論 25 709
  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 13,897評論 2 59
  • 兩周前,迷上了《國家寶藏》。不但全家總動員看,而且把鏈接發(fā)到了班級群里,學校同事群里,希望每一個學生都能去看,希望...
    王小唐閱讀 650評論 0 3
  • 季康子問:“使民敬、忠以勸,如之何?”子曰:“臨之以莊,則敬;孝慈,則忠;舉善而教不能,則勸?!?“季康子”姓季孫...
    馮靜老師閱讀 457評論 0 1
  • 開始 并不認為那就是開始  ̄切都是那么的自然 后來 這種自然成為一種習慣 再后來 習慣左右了我 現在 習慣了你 只...
    散鹽良雨閱讀 234評論 0 2

友情鏈接更多精彩內容