将页面table内容与样式另存成excel文件的方法


Posted in Javascript onAugust 05, 2015

在项目做完之余,测试最近做的一个论坛,其中有个导出功能,发现点击网页导出按钮之后,将页面的table内容另存为excel文件后,却发现无法保存表格样式,经过问题分析之后找到根本原因,下面小编就把我的实现思路给大家分享如下:

问题描述:

问题分析过程:

   1.table表格用class,而不是style。导出时并没有导出class定义,若换成style,将颜色样式直接写在style中,就会导出样式。

    style是样式,在HTML中用这个来标明属性样式,是css中的内容,而class是类,申明和定义里面的内容,导出页面时并不会导出定义即class所定义的样式。

  2.将类定义放到table中也可以导出样式

下面通过两种方案解决此问题。

处理方案一:

   将class="${getClass()}"换成style="color:${getStyle()};"

补充:

$('#export').click(function () {
 saveAsExcel($('h3').text(), $('#table').html().replace(/( )+/gi,''));
 });

其中excel只识别table,使用saveAsExcel方法自动另存时,class定义保存不了;如果手工拷贝粘贴到excel时,class定义就能保存了。
主要还是手工与自动拷贝粘贴问题

处理方案二:

将在<head><style></style></head>中定义的类移动到<table></table>之间即可。类定义样式的位置问题

以上内容就是本文的全部内容,希望大家喜欢。

Javascript 相关文章推荐
javascript新手语法小结
Jun 15 Javascript
javascript时区函数介绍
Sep 14 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
JS模拟键盘打字效果的方法
Aug 05 #Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 #Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 #Javascript
js绘制圆形和矩形的方法
Aug 05 #Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 #Javascript
JS版元素周期表实现方法
Aug 05 #Javascript
javascript实现手机震动API代码
Aug 05 #Javascript
You might like
linux命令之调试工具strace的深入分析
2013/06/03 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
Javascript - HTML的request类
2006/07/15 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
js调用css属性写法
2013/09/21 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
python实现的简单猜数字游戏
2015/04/04 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
通过实例解析Python调用json模块
2019/12/11 Python
django中的数据库迁移的实现
2020/03/16 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
python判断元素是否存在的实例方法
2020/09/24 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android