//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]) {

          //增加\t为了不让表格显示科学计数法或者其他格式

          str += `<td>${exportData[i][item] + "\t"}</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 可以自行修改请求方式

数据格式:

js实现前端导出大文件Excel的更多相关文章

  1. java 导出 excel 最佳实践，java 大文件 excel 避免OOM(内存溢出) excel 工具框架

    产品需求 产品经理需要导出一个页面的所有的信息到 EXCEL 文件. 需求分析 对于 excel 导出,是一个很常见的需求. 最常见的解决方案就是使用 poi 直接同步导出一个 excel 文件. 客 ...

  2. 纯前端导出pdf文件

    纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...

  3. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  4. 网页前端导出CSV，Excel格式文件

    通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用“\n”和“,”拼接成一个字符串,然后把字符串放到href中,这种方法只支持chrome,firefox等非ie浏览器 html页 ...

  5. web前端导出csv文件

    前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...

  6. js使用WebUploader做大文件的分块和断点续传

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  7. vue项目前端导出word文件(bug解决)

    摘要:之前项目中导出价格表是由后端实现,前端只需要调用接口下载word即可,后来业务改变比较大,word模版需要一直改动,后端改起来相对麻烦,后来直接前端自己定义模版,实现下载word文档. 一.需要 ...

  8. js+分布上传大文件

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  9. mysql导出csv文件excel打开后数字用科学计数法显示且低位变0的解决方法

    Excel显示数字时,如果数字大于12位,它会自动转化为科学计数法:如果数字大于15位,它不仅用于科学技术费表示,还会只保留高15位,其他位都变0. Excel打开csv文件时,只要字段值都是数字,它 ...

随机推荐

  1. 【noi2019集训题1】 脑部进食 期望dp+高斯消元

    题目大意:有n个点,m条有向边,每条边上有一个小写字母. 有一个人从1号点开始在这个图上随机游走,游走过程中他会按顺序记录下走过的边上的字符. 如果在某个时刻,他记录下的字符串中,存在一个子序列和S2 ...

  2. codeforces#572Div2 D1---Add On A Tree【思维】

    题目:http://codeforces.com/contest/1189/problem/D1 题意:给定一棵树,可以选择任意两个叶子节点对他们的路径增加一定的权值. 问对于给定的这棵树,是否可以得 ...

  3. Nginx设置禁止通过IP访问服务器并且只能通过指定域名访问

    为了避免别人把未备案的域名解析到自己的服务器IP而导致服务器被断网,需要在nginx上设置禁止通过IP访问服务器,只能通过域名访问. 最关键的一点是,在server的设置里面添加这么一行: liste ...

  4. LOJ P10118 打鼹鼠 题解

    每日一题 day17 打卡 Analysis 二维树状数组的单点修改和区间查询,和一维的差不多 #include<iostream> #include<cstdio> #inc ...

  5. 利用亚马逊AWS搭建个人服务器

    转载博客地址:https://www.jianshu.com/p/a045d4217175

  6. learning scala Option[T]

    Option(选项)类型用来表示一个值是可选的(有值或无值). Option[T] 是一个类型为 T 的可选值的容器: 如果值存在, Option[T] 就是一个 Some[T] ,如果不存在, Op ...

  7. P2679 子串 DP

    P2679 子串 DP 从字符串A中取出\(k\)段子串,按原顺序拼接,问存在多少个方案使拼接的字符串与字符串B相同 淦,又是这种字符串dp 设状态\(ans[i][j][k]\)表示A串位置\(i\ ...

  8. CRNN网络结构详解

    目录 一. CRNN概论 简介 网络 二. CRNN局部之特征提取 三. CRNN局部之BLSTM 四. CRNN局部之CTC 关于CTC是什么东西? CTC理论基础 五. 参考文献 一. CRNN概 ...

  9. windows server2012 搭建.netcore+nginx+nssm运行环境

    1.linux+.netcore+sqlserver的坑 linux不支持访问sqlserver2008及以下的版本(由于System.Data.SqlClient.dll的限制.windows上面访 ...

  10. Java监听器listener的介绍

    Java监听器listener的介绍 listener 能做什么 当web中某些动作发生之后,服务器就调用listener中对应的方法. 内部机制 接口回调 Web监听器 步骤 创建需要的监听器类,实 ...