问题:项目框架中导出不知道有什么限制,数据稍微大点导出不了,向上面请求解决,结果一圈推下来又推回来了,所以决定自己写,参考了网上很多大神的博客,开始试了前端导出,想着比较简单,但是乱码问题始终解决不了,方法也贴上来,如果有大佬会的可以指点下。

前段导出:

  首先绑定导出按钮的click事件,我查询是一次性查询过来的,然后数据存在全局中,调用导出方法传入数据

  然后写导出方法:

  1. tableToExcel: function (dataSource) {
  2. console.log(dataSource);
  3. //列标题,逗号隔开,每一个逗号就是隔开一个单元格
  4. var data = "日期,城市名称,设备,网元,告警标题,发生时间,恢复时间,恢复历时\n";
  5. //增加\t为了不让表格显示科学计数法或者其他格式
  6. for(var i = 0 ; i < dataSource.length ; i++ ){
  7. for(var item in dataSource[i]){
  8. data+=method.GB2321TOUFT8(dataSource[i][item])+'\t';
  9. }
  10. data+='\n';
  11. };
  12. //data = method.GB2321TOUFT8(data);
  13. console.log(data);
  14. var blob = new Blob([data], { type: 'text/csv' }); //new way
  15. var csvUrl = URL.createObjectURL(blob);
  16. document.getElementById("mylink").href = csvUrl;
  17. },

导出可以导出,但是用window7自带的excel打开就是乱码,用记事本查看编码是utf_8编码,转换成ANSI编码就不乱码了,查了了ANSI编码就是GB2321编码,找了很多转换方法没有转换过来,让客户自己转换编码不实际,所以放弃,用后台导出。

 后台导出:

  后台导出也是要前段的a标签配合,写一个导出按钮,包含a标签

  查询按钮改为设置a标签href属性为后台地址

  后台路径要保持一致,为了代码复用方便,我封装了这个导出方法,传入的时候传这么几个参数(一个包含每行数据的集合,列头名集合,导出表格名字,还有request和response对象)

  封装的方法,其实也不算完全封装,有些缺陷,注意我写的是数据查询出来都要转换成string类型的,我是写死的

  至此结束,浏览器会询问你是否下载文件,还有导出用的是poi的SXSSFWorkbook,这是为大数据导出使用的,适合大数据量导出,还有HSSFWorkbook,但是取数据大的话容易内存泄漏,里面设置也比较多,可以研究一下,还有一种csv导出,好像性能什么更加好,这个没有研究,有研究了再写博客。

导出excel表格,前端和后台导出的更多相关文章

  1. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  2. # vue 如何通过前端来导出excel表格

    在做一些简单的demo时,偶尔会遇到导出excel表格.如果请后端帮忙的话 比较浪费时间,那么前端如何导出excel表格,下面就来记录一下之前使用到的案例 一.安装依赖 npm i file-save ...

  3. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  4. Vue中导出Excel表格方法

    本文记录一下在Vue中实现导出Excel表格的做法.参考度娘上各篇博客,最后实现功能 Excel表格,我的后端返回的是数据流,然后文件名是放进了content-disposition中,前端进行获取. ...

  5. java中使用jxl导出Excel表格详细通用步骤

    该方法一般接收两个参数,response和要导出的表格内容的list. 一般我们将数据库的数据查询出来在页面进行展示,根据用户需求,可能需要对页面数据进行导出. 此时只要将展示之前查询所得的数据放入s ...

  6. vue 导出excel表格

    对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...

  7. js导出excel:前端当前数据的导出

    网上找的库文件,同样做了修改.在导出的时候,有时候数据第一列和最后一列可能是复选框和操作按钮,这个是我们不需要的,加了这个的过滤 //table2excel.js /* * jQuery table2 ...

  8. js前端导出excel:json形式的导出

    第一中形式的导出:主要是表头对应主体数据,json形式的导出 js库文件名称 : table2excel.js这个js库文件是网上找的,并且自己根据自己业务需求把内容改了一下复制到 table2exc ...

  9. 原生JavaScript 导出excel表格(兼容ie和其他主流浏览器)

    因同事的需求是想前端导出excel表格,网上找了一些demo,自己修改了一下,可能以后会用到,记录下来吧,兼容ie和一些主流浏览器,ie可能会报错,原因参考 这里,edge 浏览器还没有办法导出,正在 ...

  10. php导出excel表格的使用

    网站后台有很多列表数据,常常都会有导出excel表格的需求,和大家分享一个实用的导出excel表格方法: 不多说,上代码: /** * @param array $data 要导出的数据 * @par ...

随机推荐

  1. 将OrCAD Capture CIS的设计文件(.dsn)导入到PADS Logic VX.2.3

    操作系统:Windows 10 x64 工具1:PADS Logic VX.2.3 启动PADS Logic VX.2.3,选择菜单:File > Import... 在File Import对 ...

  2. C#应用编程小例子-01-渐显的窗体

    C#应用编程小例子-01-渐显的窗体 using System; using System.Windows.Forms; namespace WindowsFormsApp2 { public par ...

  3. 【转】Android开发规范

    转自:https://github.com/Blankj/AndroidStandardDevelop 摘要 1 前言 2 AS 规范 3 命名规范 4 代码样式规范 5 资源文件规范 6 版本统一规 ...

  4. hdfs 架构

    http://matt33.com/2018/07/15/hdfs-architecture-learn/

  5. VS2017打包注册IE插件及修改IE安全选项设置

    前言 最近项目需要在浏览器环境下读取员工身份证信息,要实现网页与硬件设备通信,考虑了几种实现方式: 1.借助ActiveX插件,通过程序库直接与设备通信. 优点:厂家提供了IE插件,开发简单 缺点:只 ...

  6. 洛谷 p2678 跳石头 题解

    一道裸的二分答案 如果不会分治的去找dalao吧,本蒟蒻只会二分 不知道二分答案的看这里 这位dalao解释的很详细其实只是随便找了一个 那里面貌似也有这个题的题解,但我还是要写(才不是应付老师) 关 ...

  7. Java - 数组排序 -- 浅析稳定性与复杂度

    上次我们了解了对数组的基本操作,那么谈到数组,我们就不得不谈谈数组的排序 什么是排序 排序是计算机内经常进行的一种操作,其目的是将一组“无序”的记录序列调整为“有序”的记录序列 -- 百度百科 排序是 ...

  8. 今天分享三种方法实现Linux系统调用,感兴趣的朋友可以参考一下

    系统调用(System Call)是操作系统为在用户态运行的进程与硬件设备(如CPU.磁盘.打印机等)进行交互提供的一组接口.当用户进程需要发生系统调用时,CPU 通过软中断切换到内核态开始执行内核系 ...

  9. in 索引失效的问题

    先安利一篇博文MySQL的or/in/union与索引优化 简单的in查询 索引失效: 步骤 1.检查建立索引没有 order_status 字段为普通索引的tinyint类型 2.检查是否使用了使索 ...

  10. 2013年省赛H题

    2013年省赛H题你不能每次都快速幂算A^x,优化就是预处理,把10^9预处理成10^5和10^4.想法真的是非常巧妙啊N=100000构造两个数组,f1[N],间隔为Af2[1e4]间隔为A^N,中 ...