JavaScript 导出数据到Excel表格

最新推荐文章于 2024-05-07 14:45:30 发布

anjing9345

最新推荐文章于 2024-05-07 14:45:30 发布

阅读量742

点赞数 1

原文链接：http://www.cnblogs.com/liuzheng0612/p/11114276.html

版权

工作中，导出数据到表格的功能很多吧，

以下是我导出数据到Excel表格的方法：

一 .首先需要引用JS脚本： 直接复制全部脚本，写到一个js文件里面，引用就行了

  1 /* eslint-disable */
  2 let idTmr;
  3 const getExplorer = () => {
  4     let explorer = window.navigator.userAgent;
  5     //ie
  6     if (explorer.indexOf("MSIE") >= 0) {
  7         return 'ie';
  8     }
  9     //firefox
 10 
 11     else if (explorer.indexOf("Firefox") >= 0) {
 12         return 'Firefox';
 13     }
 14     //Chrome
 15     else if (explorer.indexOf("Chrome") >= 0) {
 16         return 'Chrome';
 17     }
 18     //Opera
 19     else if (explorer.indexOf("Opera") >= 0) {
 20         return 'Opera';
 21     }
 22     //Safari
 23     else if (explorer.indexOf("Safari") >= 0) {
 24         return 'Safari';
 25     }
 26 }
 27 // 判断浏览器是否为IE
 28 const exportToExcel = (data, name) => {
 29 
 30     // 判断是否为IE
 31     if (getExplorer() == 'ie') {
 32         tableToIE(data, name)
 33     } else {
 34         tableToNotIE(data, name)
 35     }
 36 }
 37 
 38 const Cleanup = () => {
 39     window.clearInterval(idTmr);
 40 }
 41 
 42 // ie浏览器下执行
 43 const tableToIE = (data, name) => {
 44     let curTbl = data;
 45     let oXL = new ActiveXObject("Excel.Application");
 46 
 47     //创建AX对象excel
 48     let oWB = oXL.Workbooks.Add();
 49     //获取workbook对象
 50     let xlsheet = oWB.Worksheets(1);
 51     //激活当前sheet
 52     let sel = document.body.createTextRange();
 53     sel.moveToElementText(curTbl);
 54     //把表格中的内容移到TextRange中
 55     sel.select;
 56     //全选TextRange中内容
 57     sel.execCommand("Copy");
 58     //复制TextRange中内容
 59     xlsheet.Paste();
 60     //粘贴到活动的EXCEL中
 61 
 62     oXL.Visible = true;
 63     //设置excel可见属性
 64 
 65     try {
 66         let fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
 67     } catch (e) {
 68         print("Nested catch caught " + e);
 69     } finally {
 70         oWB.SaveAs(fname);
 71 
 72         oWB.Close(savechanges = false);
 73         //xls.visible = false;
 74         oXL.Quit();
 75         oXL = null;
 76         // 结束excel进程，退出完成
 77         window.setInterval("Cleanup();", 1);
 78         idTmr = window.setInterval("Cleanup();", 1);
 79     }
 80 }
 81 
 82 // 非ie浏览器下执行
 83 const tableToNotIE = (function () {
 84     // 编码要用utf-8不然默认gbk会出现中文乱码
 85     let uri = 'data:application/vnd.ms-excel;base64,',
 86         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><meta charset="UTF-8"><!--[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>{table}</table></body></html>',
 87         base64 = function (s) {
 88             return window.btoa(unescape(encodeURIComponent(s)));
 89 
 90         },
 91 
 92         format = (s, c) => {
 93             return s.replace(/{(\w+)}/g,
 94                 (m, p) => {
 95                     return c[p];
 96                 })
 97         }
 98     return (table, name) => {
 99         let ctx = {
100             worksheet: name,
101             table
102         }
103 
104         //创建下载
105         let link = document.createElement('a');
106         link.setAttribute('href', uri + base64(format(template, ctx)));
107 
108         link.setAttribute('download', name);
109 
110 
111         // window.location.href = uri + base64(format(template, ctx))
112         link.click();
113     }
114 })()
115 
116 // 导出函数
117 const export2Excel = (theadData, tbodyData, dataname) => {
118 
119     let re = /http/ // 字符串中包含http,则默认为图片地址
120     let th_len = theadData.length // 表头的长度
121     let tb_len = tbodyData.length // 记录条数
122     let width = 200// 设置图片大小
123     let height = 100
124 
125     // 添加表头信息
126     let thead = '<thead><tr>'
127     for (let i = 0; i < th_len; i++) {
128         thead += '<th>' + theadData[i] + '</th>'
129     }
130     thead += '</tr></thead>'
131 
132     // 添加每一行数据
133     let tbody = '<tbody>'
134     for (let i = 0; i < tb_len; i++) {
135         tbody += '<tr>'
136         let row = tbodyData[i] // 获取每一行数据
137 
138         //有图片的话  ，就把下面的if打开
139         for (let key in row) {
140             //if (re.test(row[key])) { // 如果为图片，则需要加div包住图片
141             //    // 
142             //    tbody += '<td style="width:' + width + 'px; height:' + height + 'px; text-align: center; vertical-align: middle"><div style="display:inline"><img src=\'' + row[key] + '\' ' + ' ' + 'width=' + '\"' + width + '\"' + ' ' + 'height=' + '\"' + height + '\"' + '></div></td>'
143             //} else {
144                 tbody += '<td style="text-align:center">' + row[key] + '</td>'
145             //}
146         }
147 
148         tbody += '</tr>'
149     }
150     tbody += '</tbody>'
151 
152     let table = thead + tbody
153 
154     // 导出表格
155     exportToExcel(table, "C:\Users\Mloong\Desktop")
156 }

JS脚本包

二 . js代码： post请求一个ExproExcel的方法，返回的是要导出的数据。

　　　　　ret返回的数据格式为数组的对象，　tHeader是Excel表格的头部，

 1   $.post('ExprotExcel', null, function (ret) {
 2 
 3         let tHeader = [
 4             '申请编号',
 5             '体现人',
 6             '缴税金额',
 7             '金额',
 8             '总金额',
 9             '审核状态',
10             '提现方式',
11             '创建时间',
12         ]
13         let tbody = ret;  //Excel表数据，json返回，为数组对象的结构
14         export2Excel(tHeader, tbody);
15     });

JS代码

PS： ret 返回的格式是这样的：

 1 let tbody = [
 2         {
 3             name: '玫瑰花',
 4             color: '红色',
 5             pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2801998497,4036145562&fm=27&gp=0.jpg'
 6         },
 7         {
 8             name: '菊花',
 9             color: '黄色',
10             pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1506844670,1837003941&fm=200&gp=0.jpg'
11         },
12         {
13             name: '牵牛花',
14             color: '紫色',
15             pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3056120770,1115785765&fm=27&gp=0.jpg'
16         },
17         {
18             name: '梅花',
19             color: '白色',
20             pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2700343322,3431874915&fm=27&gp=0.jpg'
21         },
22         {
23             name: '桃花花',
24             color: '粉色',
25             pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=602076004,4209938077&fm=27&gp=0.jpg'
26         }
27     ]
28 --------------------- 
29 作者：little小 
30 来源：CSDN 
31 原文：https://blog.csdn.net/xiaoxiaojie12321/article/details/81780900 
32 版权声明：本文为博主原创文章，转载请附上博文链接！

View Code

三：这种格式的数据，那么我就可以直接到后台返回了：

　　就是 List集合类型的对象，ToArray 一下就行了

 1 public ActionResult ExprotExcel()
 2         {
 3             var lists = (from a in es_EGDSuperRecordService.Instance.LoadEntities()
 4                          join b in es_AgentsService.Instance.LoadEntities() on a.sendid equals b.AgentsID
 5                          orderby a.createtime descending
 6                          select new
 7                          {
 8 
 9                              id = a.id,
10                              AgentsName = b.AgentsName,
11                              feenumber = a.feenumber,
12                              number = a.number,
13                              allnumber = a.allnumber,
14                              flag = a.flag == 0 ? "待审核" : a.flag==1?"审核通过":"审核不通过",
15                              sendaddress = a.sendaddress,
16                              createtime = a.createtime,
17                          }).ToList();
18 
19             return Json(lists.ToArray(),JsonRequestBehavior.AllowGet);
20         }

View Code

脚本包里面的一些东西，看得懂是可以直接改的。

转载于:https://www.cnblogs.com/liuzheng0612/p/11114276.html

anjing9345

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 导出数据到Excel表格

工作中，导出数据到表格的功能很多吧，以下是我导出数据到Excel表格的方法：一 .首先需要引用JS脚本：直接复制全部脚本，写到一个js文件里面，引用就行了 1 /* eslint-disable */ 2 let idTmr; 3 const getExplorer = () => { 4 let explorer =...
复制链接

扫一扫