工作中遇到一需求,要将后台的表格导出到excel后的表格样式该如何修改呢?

其实表格导出首先需要了解两个插件:jquery.table2excel.js和tableExport.js

1、第一步,写一个导出按钮button

<button id="datatable">导出</button>

2、第二步,初始化js

①jquery.table2excel.js

$('button').click(function(){
$("#datatable").table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName", //此处为导出的文件名
exclude_img: true,
exclude_links: true,
exclude_inputs: true
///////此处的配置项可以根据需求配置
});
})

②tableExport.js

$("button").click(function(){
$('#datatable').tableExport({
type:'excel',
escape:'false',
fileName: 'myFileName'//此处为导出的文件名
///////此处的配置项可以根据需求配置
});
});

3、如果导出的表格的样式无法导出到excel,需要自己在js里写,如下图



4、最后在HTML文件中引入相对应的js文件即可。

表格导出到excel的样式消失该如何修改的更多相关文章

  1. 使用JavaScript把页面上的表格导出为Excel文件

    如果在页面上展示了一个数据表格,而用户想把这个表格导出为Excel文件,那么在要求不高的情况下,可以不通过服务器生成表格,而是直接利用JavaScript的Blob和Object URL特性将表格导出 ...

  2. JS 将页面上的表格导出为 Excel 文件

    如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 E ...

  3. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

  4. 将HTML表格导出到EXCEL,兼容Firefox,支持中文

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 网站开发进阶(三十一)js如何将html表格导出为excel文件(后记)

    js如何将html表格导出为excel文件(后记) 前言 项目前期做了个导出Excel表格的功能,但是经过测试发现只有在IE上才可以正确实现,在Chrome等浏览器中无法实现导出效果.经过上网搜索,尝 ...

  6. 网站开发进阶(二十五)js如何将html表格导出为excel文件

    js如何将html表格导出为excel文件        赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...

  7. vue将表格导出为excel

    vue将表格导出为excel 一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <templat ...

  8. 将表格导出为excel

    <table id="tableExcel" border="1"> <tr> <th>零</th> <t ...

  9. html页面表格导出到excel总结

    转载:http://www.cnblogs.com/liuguanghai/archive/2012/12/31/2840262.html <table id="tableExcel& ...

随机推荐

  1. Android系统介绍与框架

    一.Andriod是什么? Android系统是Google开发的一款开源移动OS,Android中文名被国内用户俗称“安卓”.Android操作系统基于Linux内核设计,使用了Google公司自己 ...

  2. 并发编程之原子操作Atomic&Unsafe

    原子操作:不能被分割(中断)的一个或一系列操作叫原子操作. 原子操作Atomic主要有12个类,4种类型的原子更新方式,原子更新基本类型,原子更新数组,原子更新字段,原子更新引用.Atomic包中的类 ...

  3. Ubuntu安装Chrome浏览器及解决启动no-sandbox问题

    1.安装浏览器 # apt-get install gonme # apt-get update # apt-get install google-chrome-stable 2.启动Chrome浏览 ...

  4. 超详细!! sql server 同步数据库 发布 订阅 跨网段 无公网ip 常见问题

    问题描述 主机1:发布端 阿里云服务器--有公网ip 主机2:订阅端 笔记本--无公网ip 数据量很小,主要是熟悉发布订阅的操作流程. 主机2仅仅作为主机1的本地备份,要求修改云服务器上数据后,能通过 ...

  5. SSH服务协议

    1.SSH介绍: SSH 是Secure Shell Protocol 的简写,由IETF网络小组(Network Working Group)制定:在进行数据传输之前,SSH先对联机数据包通过加密技 ...

  6. JVM垃圾回收算法详解

    前言 在JVM内存模型中会将堆内存划分新生代.老年代两个区域,两块区域的主要区别在于新生代存放存活时间较短的对象,老年代存放存活时间较久的对象,除了存活时间不同外,还有垃圾回收策略的不同,在JVM中中 ...

  7. CF401D Roman and Numbers 状压DP

    CF401D 题意翻译 将n(n<=10^18)的各位数字重新排列(不允许有前导零) 求 可以构造几个mod m等于0的数字 题目描述 Roman is a young mathematicia ...

  8. [POJ2262] Goldbach’s Conjecture

    Goldbach's Conjecture Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 48161   Accepted: ...

  9. 周总结 + for 循环 + 内置方法(day06整理)

    目录 周总结 一 计算机基础之编程 (一) 什么是编程语言 (二) 什么是编程 (三) 为什么编程 二 计算机五大组成 (一) CPU (1) 运算器 (2) 控制器 (二) 存储器 (1) 主存 ( ...

  10. JVM概述和类加载器

    JVM概述 1.Java虚拟机所管理的内存包括以下几个运行时数据区域:   ①.程序计数器     程序计数器是一块较小的内存空间,可以看做是当前线程所执行的字节码的行号指示器,字节码解释器工作时就是 ...