工作中遇到一需求,要将后台的表格导出到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. 04-09 XgBoost算法

    目录 XgBoost算法 一.XgBoost算法学习目标 二.XgBoost算法详解 2.1 XgBoost算法参数 2.2 XgBoost算法目标函数 2.3 XgBoost算法正则化项 2.4 X ...

  2. 04-10 Bagging和随机森林

    目录 Bagging算法和随机森林 一.Bagging算法和随机森林学习目标 二.Bagging算法原理回顾 三.Bagging算法流程 3.1 输入 3.2 输出 3.3 流程 四.随机森林详解 4 ...

  3. idea配置maven以及手动添加webapp目录

    idea配置maven 点击右下角Configure 点击settings 3 . 设置路径 设置自动导包 4 . 点击创建新工程 5 . 选择maven点击下一步 6 . 7 . 8 . 此时,创建 ...

  4. Maven插件构建Docker镜像

    背景 微服务架构下,微服务在带来良好的设计和架构理念的同时,也带来了运维上的额外复杂性,尤其是在服务部署和服务监控上.单体应用是集中式的,就一个单体跑在一起,部署和管理的时候非常简单,而微服务是一个网 ...

  5. C语言入门-结构类型

    一.声明结构类型 #include <stdio.h> int main(int argc, char const *argv[]) { // 声明结构类型 struct date { i ...

  6. Unreal Engine 4 系列教程 Part 4:UI教程

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  7. 搭建YUM本地仓库

    本文介绍如何利用CentOS 7 ISO光盘镜像搭建YUM本地仓库. 环境准备: (1)VMware15.5版本虚拟机 (2)CentOS-7-x86_64-DVD-1908光盘镜像文件 1. 搭建Y ...

  8. 构造函数语义学——Default Constructor篇

    构造函数语义学--Default Constructor 篇 这一章原书主要分析了:编译器关于对象构造过程的干涉,即在对象构造这个过程中,编译器到底在背后做了什么 这一章的重点在于 default c ...

  9. Python3+PyCharm+PyQt5配置进行GUI开发

    一.安装Python3.5以上版本. 链接:https://www.python.org/downloads/windows/ 二.安装PyQt5. 使用pip安装:1.进入 C:\Users\你的计 ...

  10. python-Flask模版注入攻击SSTI(python沙盒逃逸)

    一篇以python Flask 模版渲染为例子的SSTI注入教学~ 0x01 Flask使用和渲染 这里简化了flask使用和渲染的教程 只把在安全中我们需要关注的部分写出来 来一段最简单的FLASK ...