您现在的位置是:网站首页>>信息浏览 文章详情

echarts导出数据到excel表格兼容所有游览器
2019-05-09 12:35 许多年以后 1583

由于echarts只有数据视图,并没有导出数据到excel表格的功能,研究了一会,发现我们可以自定义工具按钮,进行数据封装成table,然后我们把table导出成excel,实现起来很简单。

我这里把table转成excel是用到插件的,叫做table2excel.js,兼容所有的游览器,简单快捷,下载地址:https://github.com/rainabba/jquery-table2excel

1.首先看echarts的代码:
我是用dataset的方法填充的,当然不管你是什么方式的数据,只要你可以拿到数据,转变成table就行,只有你是动态的,你就可以转变成他变了

  1. function majorTotle2(opt) {
  2. var chartDom = document.getElementById('daochu');
  3. var $charts = echarts.init(chartDom);
  4. var option = {
  5. tooltip : {},
  6. dataset : {
  7. source : opt.data
  8. },
  9. toolbox: {
  10. left:'50',
  11. show: true,
  12. feature: {
  13. myTool2: {
  14. show: true,
  15. title: '导出excel文件',
  16. icon: 'image://../images/daochu.png',
  17. onclick: function (){
  18. //我们使用传入进来的opt,去构建table,由于我是dataset,所以我的数据结构是这样的,
  19. // [
  20. // ['product', '2015', '2016', '2017'],
  21. // ['Matcha Latte', 43.3, 85.8, 93.7],
  22. // ['Milk Tea', 83.1, 73.4, 55.1],
  23. // ['Cheese Cocoa', 86.4, 65.2, 82.5],
  24. // ['Walnut Brownie', 72.4, 53.9, 39.1]
  25. // ]
  26. var headData = opt.data;
  27. var table = '<table id="tableExcel_Day" style="width:100%;text-align:center"><tbody>';
  28. for (var i = 0; i < headData.length; i++) {
  29. var bodyData=headData[i];
  30. table += '<tr>';
  31. for(var j=0;j<bodyData.length;j++){
  32. table += '<td>' + bodyData[j] + '</td>';
  33. }
  34. table += '</tr>';
  35. }
  36. table += '</tbody></table>';
  37. $('#xiazai').html(table);//这里是把table放入html文件的隐藏div中,好让table2excel插件获取
  38. //使用table2excel插件,用到table的id
  39. $("#tableExcel_Day").table2excel({
  40. exclude: ".noExl", //过滤位置的 css 类名
  41. filename: '导出excel文件' + ".xls", //文件名称
  42. name: "Excel Document Name.xls",
  43. exclude_img: true,
  44. exclude_links: true,
  45. exclude_inputs: true
  46. });
  47. }
  48. }
  49. }
  50. },
  51. //。。。。。。。。省略一部分代码,关键代码是自定义工具
  52. $charts.clear();
  53. $charts.setOption(option);
  54. }

2.HTML文件中我们要加入

  1. <div style="display: none;" id="xiazai"></div>//构建table
  2. <iframe id="txtArea1" name="txtArea1" style="display:none"></iframe> //这里是为了支持ie9以下游览器,table2excel要求的,由于ie9以下游览器不支持Bold(),就用iframe的方式保存文件

3.不要忘记了添加这2个路径哦

  1. <script src="../js/jquery.min.js"></script>
  2. <script src=../js/jquery.table2excel.js"></script>
赞 (35)
文章出处:书生个人博客          转载注明下哦!o(≧v≦)o~~

标签: echarts导出数据到excel表格

相似文章:


随便说两句
请先登录
遵守国家法律法规,请勿回复无意义内容,请不要回复嵌套过多的楼层!