需求:将如下网页中的所有表格一次导入到Excel文件中。

方法:使用jQuery的tableExport.js插件,可以将网页中指定的table表格数据导出到Excel文件,而不需要经过后台。

操作步骤:

1. 在需要导出表格的页面引入以下两个js文件:

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

2. 点击导出按钮时,调用以下代码即可将多个table表格数据导出:

$('table').tableExport({
type:'excel',
ignoreColumn:[5],//从1开始,忽略第5列
mso: {//若table表格中使用了以下指定的样式属性,则将该样式同步到Excel中(可以保留表格原有的样式到Excel中)
styles:['background-color',
'border-top-color', 'border-left-color', 'border-right-color', 'border-bottom-color',
'border-top-width', 'border-left-width', 'border-right-width', 'border-bottom-width',
'border-top-style', 'border-left-style', 'border-right-style', 'border-bottom-style',
'color']
}
});

若需要导出指定的某个table表格,将$('table')改为$('#表格ID')即可。

导出的数据在Excel中的效果如下图:

插件的下载及其它功能的使用方法请看:

https://github.com/hhurz/tableExport.jquery.plugin

Jquery tableExport.js将网页中的表格导出为Excel的更多相关文章

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

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

  2. Asp.net网页中DataGridView数据导出到Excel

    经过上网找资料,终于找到一种可以直接将GridView中数据导出到Excel文件的方法,归纳方法如下: 1. 注:其中的字符集格式若改为“GB2312”,导出的部分数据可能为乱码: 导出之前需要关闭分 ...

  3. 在react项目中实现表格导出为Excel

    需求背景 数据表格有时需要增加导出Excel功能,大多数情况下都是后端出下载接口,前端去调用. 对于数据量少的数据,可以通过前端技术实现,减少后端工作. 实现方式 使用插件--xlsx 根据自己项目情 ...

  4. Ifvisible.js – 判断网页中的用户是闲置还是活动状态

    ifvisible.js 是一个跨浏览器.轻量级的方式,用户检查用户在浏览页面或正在与它进行交互.它可以处理活动状态,如在页面上空闲或活跃.您还可以使用 ifvisible.js 智能设置您的间隔,如 ...

  5. [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  6. prism.js——让网页中的代码更好看

    粗放的代码展示 有时候,网页中会插入代码.直接把代码放入<pre></pre>标签和<code></code>标签里,也算是可以在页面中显示出来. 比如 ...

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

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

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

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

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

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

  10. 表格导出到excel的样式消失该如何修改

    工作中遇到一需求,要将后台的表格导出到excel后的表格样式该如何修改呢? 其实表格导出首先需要了解两个插件:jquery.table2excel.js和tableExport.js 1.第一步,写一 ...

随机推荐

  1. 【jmeter】测试socket接口的简单应用

    一.场景 有一天开发问我,有没有什么工具可以测试socket,tcp,当时有点懵,这种需求还是少见 二.方法 使用Jmeter可以进行相关的测试 三.创建服务端环境 使用python搞个socket服 ...

  2. 【网络知识】虚拟机的桥接、NAT、仅主机模式分别是什么?

    在我们安装 VMware 时,VMware 会自动三种 3 种网络连接模式,分别为VMnet0 (桥接模式).VMnet8 (NAT模式).VMnet1 (仅主机模式),当然我们也可以根据需要自行创建 ...

  3. R 语言中 X11 相关的一些问题

    参考 Anaconda 官方文档<Using R language with Anaconda>安装 R-4.0.2: conda create -n r-4.0.2 r-essentia ...

  4. Java中打印对象输出的字符串到底是什么?

    前言 我们在进行 Java 编程时,经常要打印对象,有的是查看是否拿到了该对象,有的是查看该对象中的数据.打印输出的却是一知半解的字符串,那么这个字符串是怎么来的?代表什么?我们如何打印出对象中的数据 ...

  5. Redis系列16:聊聊布隆过滤器(原理篇)

    Redis系列1:深刻理解高性能Redis的本质 Redis系列2:数据持久化提高可用性 Redis系列3:高可用之主从架构 Redis系列4:高可用之Sentinel(哨兵模式) Redis系列5: ...

  6. 2023-06-14:我们从二叉树的根节点 root 开始进行深度优先搜索。 在遍历中的每个节点处,我们输出 D 条短划线(其中 D 是该节点的深度) 然后输出该节点的值。(如果节点的深度为 D,则其

    2023-06-14:我们从二叉树的根节点 root 开始进行深度优先搜索. 在遍历中的每个节点处,我们输出 D 条短划线(其中 D 是该节点的深度) 然后输出该节点的值.(如果节点的深度为 D,则其 ...

  7. 一文了解Go语言的函数

    1. 引言 函数是编程中不可或缺的组成部分,无论是在Go语言还是其他编程语言中,函数都扮演着重要的角色.函数能够将一系列的操作封装在一起,使得代码更加模块化.可重用和易于维护. 在本文中,我们将详细介 ...

  8. 前端Vue自定义简单好用商品分类列表组件 侧边栏商品分类组件

    前端Vue自定义简单好用商品分类列表组件 侧边栏商品分类组件 , 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13148 效果 ...

  9. React后台管理系统 02样式初始化,引入reset-css

    上一篇中,我们已经对项目的整体结构进行了搭建,现在需要对不需要的东西进行删除,最后留下这些东西. 现在需要对全部的样式进行清除,使用命令导入依赖:npm i reset-css 然后在main.tsx ...

  10. 一个跨平台的`ChatGPT`悬浮窗工具

    一个跨平台的ChatGPT悬浮窗工具 使用avalonia实现的ChatGPT的工具,设计成悬浮窗,并且支持插件. 如何实现悬浮窗? 在使用avalonia实现悬浮窗也是非常的简单的. 实现我们需要将 ...