zy-crm.git - Gitblit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>excel</title>
  <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
  <link rel='stylesheet' href='../../static/plugins/css/pluginsCss.css' />
  <link rel='stylesheet' href='../../static/plugins/plugins.css' />
  <link rel='stylesheet' href='../../static/css/luckysheet.css' />
  <link rel='stylesheet' href='../../static/assets/iconfont/iconfont.css' />
  <script src="../../static/js/luckysheet_js/plugin.js"></script>
  <script src="../../static/js/luckysheet_js/luckysheet.umd.js"></script>
  <script src="../../static/js/luckysheet_js/luckyexcel.umd.js"></script>
  <script src="../../static/js/luckysheet_js/exceljs.min.js"></script>
  <script type="text/javascript" src="../../static/js/luckysheet_js/export.js" charset="utf-8"></script>
  <script type="text/javascript" src="../../static/js/luckysheet_js/pako.es5.js" charset="utf-8"></script>
  <script type="text/javascript" src="../../static/js/luckysheet_js/base64.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
  <script type="text/javascript" src="../../static/js/luckysheet_js/print.min.js" charset="utf-8"></script>
</head>
<body>
<div style="display: flex;position: absolute;top: 20px;left:30px;z-index: 9999;">
<!--  <div><button type="button" id="export">导出Execel</button></div>-->
  <div>
    <input type="file" style="display: none;" id="uploadFile">
    <button type="button" class="layui-btn layui-btn-xs" id="upload-button">
      <i class="layui-icon">&#xe67c;</i>上传模板
    </button>
  </div>
  <div><button type="button" class="layui-btn layui-btn-primary layui-btn-xs btn-edit" id="save">保存</button></div>
  <div><button type="button" class="layui-btn layui-btn-primary layui-btn-xs btn-edit" id="allprint">全部打印</button></div>
  <div><button type="button" class="layui-btn layui-btn-primary layui-btn-xs btn-edit" id="print">选区打印</button></div>
</div>
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height: 100vh;left: 0px;top: 0px;"></div>
<script>
  $(function () {
    var layer = layui.layer;
 
    //配置项
    var options = {
      container: 'luckysheet' ,//luckysheet为容器id
      title: '核价模板', //工作簿名称
      lang: 'zh', //设定表格语言 国际化设置，允许设置表格的语言，支持中文("zh")和英文("en")
      allowEdit: true, //是否允许前台编辑
      sheetFormulaBar: true, //是否显示公式栏
      forceCalculation: true,//强制计算公式
      myFolderUrl: '' //左上角<返回按钮的链接
    }
 
    if(getUrlParams('id') == false){
      //新增
      luckysheet.create(options)
      $("#luckysheet_info_detail_update").hide()
      $("#luckysheet_info_detail_save").hide()
      $("#luckysheet_info_detail_title").hide()
    }else{
      //修改
      $.ajax({
        type:"get",
        url: baseUrl + "/reimburse/" + getUrlParams('id') + "/auth",
        dataType:"json",
        headers: {'token': localStorage.getItem('token')},
        success:function(res) {
          options.data = unzip(res.data.sheetData)
          options.title = res.data.title
          luckysheet.create(options)
          $("#luckysheet_info_detail_update").hide()
          $("#luckysheet_info_detail_save").hide()
          $("#luckysheet_info_detail_title").hide()
        }
      });
 
    }
 
    //点击上传
    $("#upload-button").on("click",() => {
      $("#uploadFile").click()
    })
 
    //响应上传
    $("#uploadFile").on("change",(evt) => {
      var files = evt.target.files;
      if(files==null || files.length==0){
        alert("No files wait for import");
        return;
      }
 
      let name = files[0].name;
      let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length-1];
      if(suffix!="xlsx"){
        alert("Currently only supports the import of xlsx files");
        return;
      }
      LuckyExcel.transformExcelToLucky(files[0], function(exportJson, luckysheetfile){
 
        if(exportJson.sheets==null || exportJson.sheets.length==0){
          alert("Failed to read the content of the excel file, currently does not support xls files!");
          return;
        }
        window.luckysheet.destroy();
 
        window.luckysheet.create({
          container: 'luckysheet', //luckysheet is the container id
          data:exportJson.sheets,
          title:exportJson.info.name,
          userInfo:exportJson.info.name.creator,
          lang: 'zh', //设定表格语言 国际化设置，允许设置表格的语言，支持中文("zh")和英文("en")
          allowEdit: true, //是否允许前台编辑
          sheetFormulaBar: true, //是否显示公式栏
          forceCalculation: true,//强制计算公式
        });
      });
    })
 
    $("#export").on("click",() => {
      console.log('export')
      exportExcel(luckysheet.getluckysheetfile()).then((e) => {
        saveFile(e,'file');
      })
    })
 
    //保存到服务器
    $("#save").on("click",async () => {
      if (getUrlParams('id') == false) {
        //新增
        $.ajax({
          url: baseUrl + "/reimburse/add/auth",
          headers: {'token': localStorage.getItem('token')},
          data: JSON.stringify({
            title: luckysheet.toJson().title,
            sheetData: zip(luckysheet.getAllSheets())
          }),
          method: 'POST',
          dataType: "json",
          contentType:'application/json;charset=UTF-8',
          success: function (res) {
            if (res.code == 200) {
              layer.msg('保存成功', {time: 1000}, () => {
                parent.location.reload()
              })
            } else {
              layer.msg(res.msg, {time: 1000})
            }
          }
        });
      } else {
        //修改
        $.ajax({
          url: baseUrl + "/reimburse/update/auth",
          headers: {'token': localStorage.getItem('token')},
          data: JSON.stringify({
            id: getUrlParams('id'),
            title: luckysheet.toJson().title,
            sheetData: zip(luckysheet.getAllSheets())
          }),
          method: 'POST',
          dataType: "json",
          contentType:'application/json;charset=UTF-8',
          success: function (res) {
            if (res.code == 200) {
              layer.msg('保存成功', {time: 1000}, () => {
                parent.location.reload()
              })
            } else {
              layer.msg(res.msg, {time: 1000})
            }
          }
        })
      }
    })
 
  })
 
  $("#allprint").on("click",() => {
    printExcel()
  })
 
  $("#print").on("click",() => {
    let src = luckysheet.getScreenshot(); // 生成base64图片
    const style = '@page {margin:0 10mm};'
    printJS({
      printable: src,
      type: 'image',
      style: style
    }) // Print.js插件
  })
 
  // 获取表格中包含内容的row，column
  function getExcelRowColumn() {
    const sheetData = luckysheet.getSheetData();
    let objRowColumn = {
      row: [null, null], //行
      column: [null, null], //列
    };
    sheetData.forEach((item, index) => {
      //行数
      item.forEach((it, itemIndex) => {
        if (it !== null) {
          if (objRowColumn.row[0] == null) objRowColumn.row[0] = index; // row第一位
          objRowColumn.row[1] = index; //row第二位
          if (objRowColumn.column[0] == null)
            objRowColumn.column[0] = itemIndex; //column第一位
          objRowColumn.column[1] = itemIndex; //column第二位
        }
      });
    });
    return objRowColumn;
  }
 
  function printExcel() {
    let RowColumn = this.getExcelRowColumn() // 获取有值的行和列
    RowColumn.column[0] = 0 //因需要打印左边的边框，需重新设置
    luckysheet.setRangeShow(RowColumn) // 进行选区操作
    let src = luckysheet.getScreenshot(); // 生成base64图片
    const style = '@page {margin:0 10mm};'
    printJS({
      printable: src,
      type: 'image',
      style: style
    }) // Print.js插件
  }
 
  function getUrlParams(name) {
    var url = window.location.search;
    if (url.indexOf('?') == -1) { return false; }
    url = url.substr(1);
    url = url.split('&');
    var name = name || '';
    var nameres;
    for (var i = 0; i < url.length; i++) {
      var info = url[i].split('=');
      var obj = {};
      obj[info[0]] = decodeURI(info[1]);
      url[i] = obj;
    }
    if (name) {
      for (var i = 0; i < url.length; i++) {
        for (var key in url[i]) {
          if (key == name) {
            nameres = url[i][key];
          }
        }
      }
    } else {
      nameres = url;
    }
    return nameres;
  }
 
  // 压缩
  function zip(data) {
    if (!data) return data
    // 判断数据是否需要转为JSON
    const dataJson = typeof data !== 'string' && typeof data !== 'number' ? JSON.stringify(data) : data
 
    // 使用Base64.encode处理字符编码，兼容中文
    const str = Base64.encode(dataJson)
    let binaryString = pako.gzip(str);
    let arr = Array.from(binaryString);
    let s = "";
    arr.forEach((item, index) => {
      s += String.fromCharCode(item)
    })
    return btoa(s)
  }
 
  // 解压
  function unzip(b64Data) {
    let strData = atob(b64Data);
    let charData = strData.split('').map(function (x) {
      return x.charCodeAt(0);
    });
    let binData = new Uint8Array(charData);
    let data = pako.ungzip(binData);
 
    // ↓切片处理数据，防止内存溢出报错↓
    let str = '';
    const chunk = 8 * 1024
    let i;
    for (i = 0; i < data.length / chunk; i++) {
      str += String.fromCharCode.apply(null, data.slice(i * chunk, (i + 1) * chunk));
    }
    str += String.fromCharCode.apply(null, data.slice(i * chunk));
    // ↑切片处理数据，防止内存溢出报错↑
 
    const unzipStr = Base64.decode(str);
    let result = ''
 
    // 对象或数组进行JSON转换
    try {
      result = JSON.parse(unzipStr)
    } catch (error) {
      if (/Unexpected token o in JSON at position 0/.test(error)) {
        // 如果没有转换成功，代表值为基本数据，直接赋值
        result = unzipStr
      }
    }
    return result
  }
 
</script>
</body>
</html>