zoukankan      html  css  js  c++  java
  • js实现前端导出大文件Excel

    //base64转换成blob
    function dataURIToBlob(dataURI, callback) {
      var binStr = atob(dataURI.split(",")[1]),
        len = binStr.length,
        arr = new Uint8Array(len);
    
      for (var i = 0; i < len; i++) {
        arr[i] = binStr.charCodeAt(i);
      }
    
      callback(new Blob([arr]));
    }
    
    var callback = function(blob) {
      var a = document.createElement("a");
      a.download = "数据" + ".xls";
      a.innerHTML = "download";
      // the string representation of the object URL will be small enough to workaround the browser‘s limitations
      a.href = URL.createObjectURL(blob);
      // you must revoke the object URL,
      //   but since we can‘t know when the download occured, we have to attach it on the click handler..
      a.click();
    };
    
    //下载导出
    $(".down_box").click(function(e) {
      $.axs(
        host + "/digital/communication/exportData.action",
        {},
        function(data) {
          $(".down_box").css({ "pointer-events": "", opacity: "1" });
          var exportData = data.returnMap.exportData;
          // console.log(data.returnMap.exportData);
          //列标题
          let str =
            "<tr><td>数据时间</td><td>指标编号</td>" +
            "<td>指标名称</td><td>机构号</td><td>机构名称</td><td>机构层级</td>" +
            "<td>父机构号</td><td>父机构名称</td><td>实时完成值</td><td>实时目标值</td><td>实时完成比</td><td>实时目标值差值</td>" +
            "<td>实时完成比排名</td><td>实时完成比红绿字</td><td>实时完成预警值</td><td>上周实时</td><td>同比上周实时差值</td>" +
            "<td>同比上周实时</td><td>同比上周实时红绿字</td></tr>";
    
          //循环遍历,每行加入tr标签,每个单元格加td标签
          for (let i = 0; i < exportData.length; i++) {
            str += "<tr>";
            for (let item in exportData[i]) {
              //增加	为了不让表格显示科学计数法或者其他格式
              str += `<td>${exportData[i][item] + "	"}</td>`;
            }
            str += "</tr>";
          }
          //Worksheet名
          let worksheet = "Sheet1";
          let uri =
            "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,";
    
          //下载的表格模板数据
          let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
              xmlns:x="urn:schemas-microsoft-com:office:excel"
              xmlns="http://www.w3.org/TR/REC-html40">
              <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                <x:Name>${worksheet}</x:Name>
                <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                </head><body><table>${str}</table></body></html>`;
          //下载模板
          var template1 = uri + btoa(unescape(encodeURIComponent(template)));
          dataURIToBlob(template1, callback);
        },
        function() {
          $(".down_box").css({ "pointer-events": "", opacity: "1" });
        },
        function() {
          $(".down_box").css({ "pointer-events": "none", opacity: "0.5" });
        }
      );
    });
    

      

    HTML

    <div class="down_box">下载<div/>
    

      

    备注: ajax部分为封装的ajax 可以自行修改请求方式 

    数据格式:

  • 相关阅读:
    MongoDB数据创建与使用
    python库安装方法及下载依赖库
    java开发基础知识学习
    wifi破解基础及工具的使用
    Markdonw基本语法学习
    toj 4353 Estimation(树状数组+二分查找)
    POJ 1694 An Old Stone Game【递归+排序】
    POJ 2092 Grandpa is Famous【水---找出现第二多的数】
    POJ 2993 Emag eht htiw Em Pleh【模拟画棋盘】
    POJ 1068 Parencodings【水模拟--数括号】
  • 原文地址:https://www.cnblogs.com/moli-/p/11540392.html
Copyright © 2011-2022 走看看