js导出Excel表格

  直接上代码:

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

 //Excel下载
function base64(content) {
return window.btoa(unescape(encodeURIComponent(content)));
}
function exportOffice(dom, tableID, fName) {
var type = 'excel';
var table = document.getElementById(tableID);
var excelContent = table.innerHTML;
var ddd="<td style=\"mso-number-format:'\\@';\">";
10 var result=((excelContent).toString()).replace(/<td(.*?)>/g,ddd);
console.log(result);
var excelFile = "<html xmlns:v='urn:schemas-microsoft-com:vml' xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:" + type + "' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += "<head>";
excelFile += "<meta http-equiv=Content-Type; content=text/html;charset=UTF-8>";
excelFile += "<!--[if gte mso 9]>";
excelFile += "<xml>";
excelFile += "<x:ExcelWorkbook>";
excelFile += "<x:ExcelWorksheets>";
excelFile += "<x:ExcelWorksheet>";
excelFile += "<x:Name>";
excelFile += "{worksheet}";
excelFile += "</x:Name>";
excelFile += "<x:WorksheetOptions>";
excelFile += "<x:DisplayGridlines/>";
excelFile += "</x:WorksheetOptions>";
excelFile += "</x:ExcelWorksheet>";
excelFile += "</x:ExcelWorksheets>";
excelFile += "</x:ExcelWorkbook>";
excelFile += "</xml>";
excelFile += "<![endif]-->";
excelFile += "</head>";
excelFile += "<body><table>";
excelFile += result;
excelFile += "</table></body>";
excelFile += "</html>";
var base64data = "base64," + base64(excelFile);
switch (type) {
case 'excel':
dom.href = 'data:application/vnd.ms-' + type + ';' + base64data;
;//必须是a标签,否则无法下载改名
dom.download = fName;
break;
}
}

  引用:

  1、首先得是a标签。

  2、this:指向a的点击。

  3、'grid-basic':表格的id名。

  4、'统计报表':导出Excel后的表格名

<a onClick="exportOffice(this,'grid-basic','统计报表')">导出Excel</a>

  附上转换红色部分参考文献:https://www.cnblogs.com/zhangym118/p/6378469.html

  

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

  1. html js 导出excel表格

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

  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. 比较empty()与 isset()d的区别

    比较empty()与 isset()的区别 注意:empty()在PHP5.5之前只能检测变量 isset()只能检测变量 两者之间的联系:empty($var) 等价于 !isset($var)|| ...

  2. insert update delete 语法 以及用法

    insert update delete 被称为 数据定义语句语句 也就是数据的增加 修改 删除 其中不包括查询 譬如: create database -创建数据库 alter database - ...

  3. 【mysql】模糊查询的使用

    1.like/not like 关键字的模糊查询(SQL模式) 基础模板:  SELECT  *  FROM   test  WHERE name LIKE '%你好_'     :匹配       ...

  4. (转)pycharm快捷键、常用设置、配置管理

    原文: http://blog.csdn.net/pipisorry/article/details/39909057 本博客一直在同步更新中! 内容包含:pycharm学习技巧 Learning t ...

  5. mysql 开发基础系列8 表的存储引擎

    一. 表的存储引擎 1. 概述 插件式存储引擎是mysql数据库最重要的特性之一, 用户可以根据应用的需要选择如何存储和索引数据,是否使用事务等.在mysql 5.0里支持的引擎包括: MyISAM, ...

  6. 导入项目的时候报错Error:Could not find com.android.support.constraint:constraint-layout:1.0.0-alpha7

    问题描述 今天在导入项目的时候报错: Error:Could not find com.android.support.constraint:constraint-layout:1.0.0-alpha ...

  7. 【转载】“宇宙最强” IDE,Visual Studio 2019 正式发布

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 本文由葡萄城翻译并发布 今天凌晨Visual Studio 2019已经正式发布,现在已经可以下载了.使用V ...

  8. SpringBoot配置Cors解决跨域请求问题

    一.同源策略简介 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[or ...

  9. MySQL高可用新玩法之MGR+Consul

    前面的文章有提到过利用consul+mha实现mysql的高可用,以及利用consul+sentinel实现redis的高可用,具体的请查看:http://www.cnblogs.com/gomysq ...

  10. HBase 在人工智能场景的使用

    近几年来,人工智能逐渐火热起来,特别是和大数据一起结合使用.人工智能的主要场景又包括图像能力.语音能力.自然语言处理能力和用户画像能力等等.这些场景我们都需要处理海量的数据,处理完的数据一般都需要存储 ...