1. //base64转换成blob
  2. function dataURIToBlob(dataURI, callback) {
  3.   var binStr = atob(dataURI.split(",")[1]),
  4.     len = binStr.length,
  5.     arr = new Uint8Array(len);
  6.  
  7.   for (var i = 0; i < len; i++) {
  8.     arr[i] = binStr.charCodeAt(i);
  9.   }
  10.  
  11.   callback(new Blob([arr]));
  12. }
  13.  
  14. var callback = function(blob) {
  15.   var a = document.createElement("a");
  16.   a.download = "数据" + ".xls";
  17.   a.innerHTML = "download";
  18.   // the string representation of the object URL will be small enough to workaround the browser‘s limitations
  19.   a.href = URL.createObjectURL(blob);
  20.   // you must revoke the object URL,
  21.   //   but since we can‘t know when the download occured, we have to attach it on the click handler..
  22.   a.click();
  23. };
  24.  
  25. //下载导出
  26. $(".down_box").click(function(e) {
  27.   $.axs(
  28.     host + "/digital/communication/exportData.action",
  29.     {},
  30.     function(data) {
  31.       $(".down_box").css({ "pointer-events": "", opacity: "1" });
  32.       var exportData = data.returnMap.exportData;
  33.       // console.log(data.returnMap.exportData);
  34.       //列标题
  35.       let str =
  36.         "<tr><td>数据时间</td><td>指标编号</td>" +
  37.         "<td>指标名称</td><td>机构号</td><td>机构名称</td><td>机构层级</td>" +
  38.         "<td>父机构号</td><td>父机构名称</td><td>实时完成值</td><td>实时目标值</td><td>实时完成比</td><td>实时目标值差值</td>" +
  39.         "<td>实时完成比排名</td><td>实时完成比红绿字</td><td>实时完成预警值</td><td>上周实时</td><td>同比上周实时差值</td>" +
  40.         "<td>同比上周实时</td><td>同比上周实时红绿字</td></tr>";
  41.  
  42.       //循环遍历，每行加入tr标签，每个单元格加td标签
  43.       for (let i = 0; i < exportData.length; i++) {
  44.         str += "<tr>";
  45.         for (let item in exportData[i]) {
  46.           //增加\t为了不让表格显示科学计数法或者其他格式
  47.           str += `<td>${exportData[i][item] + "\t"}</td>`;
  48.         }
  49.         str += "</tr>";
  50.       }
  51.       //Worksheet名
  52.       let worksheet = "Sheet1";
  53.       let uri =
  54.         "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,";
  55.  
  56.       //下载的表格模板数据
  57.       let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
  58.           xmlns:x="urn:schemas-microsoft-com:office:excel"
  59.           xmlns="http://www.w3.org/TR/REC-html40">
  60.           <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
  61.             <x:Name>${worksheet}</x:Name>
  62.             <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
  63.             </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
  64.             </head><body><table>${str}</table></body></html>`;
  65.       //下载模板
  66.       var template1 = uri + btoa(unescape(encodeURIComponent(template)));
  67.       dataURIToBlob(template1, callback);
  68.     },
  69.     function() {
  70.       $(".down_box").css({ "pointer-events": "", opacity: "1" });
  71.     },
  72.     function() {
  73.       $(".down_box").css({ "pointer-events": "none", opacity: "0.5" });
  74.     }
  75.   );
  76. });

　　

HTML

  1. <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. eclipse跳转到exitCurrentThread

    1.在使用Eclipse时,用Debug模式运行springboot项目,结果总是在项目快启动成功的时候,跳转到exitCurrentException这个地方 2.方法:Eclipse->[P ...

  2. go if for while 的使用

    fileName := "a.txt"contents ,err := ioutil.ReadFile(fileName) if err != nil{ fmt.Println(& ...

  3. 2019-2020-1 20199312《Linux内核原理与分析》第一周作业

    实验一:linux系统简介 Linux 本身只是操作系统的内核.内核是使其它程序能够运行的基础.它实现了多任务和硬件管理,用户或者系统管理员交互运行的所有程序实际上都运行在内核之上.其中有些程序是必需 ...

  4. 修改DEDE文章标题长度,解决DEDE文章标题显示不全

    在用dede调用列表标题出来的时候,会发现标题文字字数显示不完全,那是因为dede默认标题出来长度是30个字符,为了让标题显示完整,要做以下修改! 进入后台–系统–系统设置–系统基本参数–其他选项–文 ...

  5. 53、servlet3.0-简介&测试

    53.servlet3.0-简介&测试 Servlet 4.0 : https://www.jcp.org/en/jsr/summary?id=servlet+4.0

  6. php流程控制之if else语法

    php流程控制之if else语法 if和else语法 这是一个非常重要的章节,也是PHP当中的一个重要的语法. [注意]我对这个语法的定义级别为:默写级别.也就是你需要,闭着眼睛,都能够写出来的东西 ...

  7. /etc/sysconfig/network-scripts/ifcfg-ensxx

    TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPROTO=static # 获取ip的方式,static表示静态设置的ip,还有dhcp,系统 ...

  8. 块状链表 codevs 2333弹飞绵羊

    块状链表,分块处理,先预处理每一个点跳到下一个块 跳到哪,步数.然后修改的时候,修该那一个块即可 #include<cstdio>#include<cmath>int a[20 ...

  9. yii2.0 模块的使用

    以高级模板为例 1.复制目录 frontend或backend 为一个新目录pro修改advanced\common\config\bootstrap.php 添加一行,加载刚才的路劲Yii::set ...

  10. centos7 安装 Mysql 5.7.27，详细完整教程

    1. 下载 MySQL yum包 wget http://repo.mysql.com/mysql57-community-release-el7-10.noarch.rpm   2.安装MySQL源 ...