这个使用js 导出excel，可以集成其他语言，可以html,php,asp ,java 等，自己喜欢用那种语言就用哪种，使用非常方便。js是使用tableExport.js ，jquery-3.2.1.min.js 以及FileSaver.min.js

这个tableExport.js js插件很强大，有兴趣的可以搜索一下，这里分享个html + js 的导出excel表格。

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4   <meta charset="UTF-8">

 5   <title>HTML table Export</title>

 6 <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

 7 <script type="text/javascript" src="js/FileSaver.min.js" ></script>

 8 <script type="text/javascript" src="js/tableExport.js" ></script>

 9   <script type="text/javascript">

10     $(document).ready(function() {

11       var Table = document.getElementById ( 'container' );

12       var T = [];

13       var r = 0;

14       var c = 1;

15       var rmax = 5;

16       var cmax = 26;

17

18       T.push('<table id="grid">');

19       T.push('<thead>');

20       T.push('<tr>');

21

22       T.push('<th>col #</th>');

23       while (++c <= cmax+1)

24         T.push('<td>col ' + c + '</td>');

25

26       T.push('</tr>');

27       T.push('</thead>');

28       T.push('<tbody>');

29

30       while (r++ < rmax) {

31         c = 0;

32

33         T.push('<tr>');

34         T.push('<td>' + r + '</td>');

35         while (c++ < cmax)

36           T.push('<td>' + getRandomInt(100,10000) + '</td>');

37         T.push('</tr>');

38       }

39

40       T.push('</tbody>');

41       T.push('</table>');

42

43       Table.innerHTML = T.join ("");

44

45       $('#export').click(function() {

46         $('#grid').tableExport({

47           type:'excel',

48           fileName:"测试"

49

50         });

51         // $('#grid').tableExport({type:'xlsx'});

52       });

53     });

54

55     function getRandomInt(min, max) {

56         return Math.floor(Math.random() * (max - min + 1)) + min;

57     }

58 </script>

59

60 </head>

61   <body>

62     <button id="export">导出 Excel</button>

63     <div id="container">

64     </div>

65   </body>

66 </html>

效果如下图：

这里是整个js+html 源代码，喜欢的拿去下载使用。点击这里下载：js导出excel表格 （访问密码：7509）

如果有不懂得，欢迎交流联系，谢谢。

html js 导出excel表格的更多相关文章

  1. js导出Excel表格

    js导出Excel表格 直接上代码: 红色部分:如果表格数据中有“1/1”这样的值,会在导出的Excel中转化为日期“1月1日”,所以才加上了红色那两句.如果返回值中没有这样的格式,红色部分可以不写. ...

  2. js导出excel表格中较长数字串会变成科学计数法问题

    在做项目中,遇到导出excel表格时,银行账户号数字过长,导出的数字串变为计数法形式,如下图: 网上搜到解决方法,粘贴到这以供学习.不断更新. 原博地址:http://www.cnblogs.com/ ...

  3. js导出excel表格并生成多sheet

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"

    Html Table用JS导出excel格式问题 我在网上找的JS把HTML Tabel导出成EXCEL.但是如果Table里的数字内容为0开的的导成Excel后会自动删除0,我想以text的格式写入 ...

  5. JS导出excel设置下载的标题/与angular结合冲突

    2017.8更新 此功能与angular结合使用时,最后一行 document.getElementById("dlink").click(); 与angular的ng-click ...

  6. vue 导出excel表格

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

  7. vue中导出Excel表格

    项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待. 1.首先我们需要安装 ...

  8. 在vue中导出excel表格

    初学者学习vue开发,想把前端项目中导出Excel表格,查了众多帖子,踩了很多坑,拿出来与大家分享一下经验. 安装依赖 //npm npm install file-saver -S npm inst ...

  9. vue 纯前端导出 excel 表格

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

随机推荐

  1. NOI Online 2022 一游

    NOI Online 2022 一游 TG 啊,上午比提高,根据去年的经验,题目配置估计那至少一黑 所以直接做 1 题即可.(确信) 总体:估分 140,炸了但没完全炸 奇怪的过程 开题:3 2 1 ...

  2. ESXI系列问题整理以及记录——使用SSH为设备打VIB驱动包，同时提供一种对于ESXI不兼容螃蟹网卡(Realtek 瑞昱)的问题解决思路

    对于ESXI不兼容螃蟹网卡的问题,这里建议购买一张博通的低端单口千兆网卡,先使用博通网卡完成系统部署,再按照下文方法添加螃蟹网卡的VIB驱动,最后拆除博通网卡. 螃蟹网卡VIB驱动包下载地址:http ...

  3. VMware 虚拟机安装CentOS镜像详细步骤

    CentOS目前官网提供的下载版本有6.7.8,最新的版本为8,不过个人推荐CentOS 7 的版本,因为相比较于最新版本,版本7更加地稳定.而相比于版本6,版本7新增了很多的功能.CentOS 7 ...

  4. 记一次APP渗透登录验证绕过思路

    前言: 起初是抓包时候查看返回状态码不一致,所以觉得是否可以通过修改状态码来达到绕过的目的,但是拦截响应包再替换手速不够,技术大哥就去搜了下,找到了一个方法,可以自动替换响应包内容. 在偏下方一点的地 ...

  5. VueX的热更替你知道多少？

    前言 我们在使用Vuex的时候,会时不时的更改Vuex内的数据,但是页面不会随之更新,如果数据量大,一个数据依赖另一个数据的话,这样我们要是再刷新页面的话会把以前依赖的数据清空,效率特别低.所以,今天 ...

  6. vue按需引入第三方ui插件优化

    components.js import { fullScreenContainer, borderBox12, scrollBoard, loading, borderBox10, borderBo ...

  7. Java 将HTML转为Word

    本文以Java代码为例介绍如何实现将HTML文件转为Word文档(.docx..doc).在实际开发场景中可参考此方法来转换.下面详细方法及步骤. 在编辑代码前,请先在程序中导入Spire.Doc.j ...

  8. 在linux上配置Maven环境变量

    1.首先下载maven ,这里我使用的是3.8.1 Maven – Download Apache Maven 2.在linux环境中,将maven上传至 /usr/local/目录中 这里我将mav ...

  9. 【docker专栏2】CentOS操作系统安装DockerCE

    目录 一.前置要求 二.更新软件源信息 三.安装 Docker-CE 四.卸载Docker CE 为大家介绍在CentOS操作系统中安装docker的过程,linux其他发行版本安装docker方法可 ...

  10. JavaWEB-01-MySQL基础

    JavaWeb内容 数据库 – 数据存储 MySQL JDBC Maven - 项目管理工具 Mybatis 前端 - 为了前端哥们沟通 HTML+CSS JavaScript Ajax + Vue ...