使用JS和PHP导出table表格
把table表格的内容导出成excel 或者word等格式(简单容易不需要太多php)
导出需注意
1. 样式都在行间,导出excel表格会继承样式包括colspan、rowspan,非表格元素,样式不会生效
2.样式非行间,导出excel之后,只有数据,不保存样式。excel不支持非表格元素的样式
原理
JS:获取表格的dom结构内容,赋值给表单,提交表单
PHP:设置请求头,获取请求的表格内容,echo输出,由于获取的表格没有table标签,输出的时候要加上,如果获取的时候有,就不需要了
注意:需要在服务器模式下运行
html+js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.min.js"></script>
<style media="screen">
table{
border-collapse:collapse; border-spacing:0;
}
</style>
</head>
<body>
<button type="button" name="button" id="export">导出</button>
<table id="tablelist" border="1" >
<tr>
<th rowspan="2">11111</th>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td>22222</td>
<td>22222</td>
</tr>
</table>
<form action="./excel.php" method="post" id="excelfromtable" style="" target="_blank">
<input name="excelContent" id="excelContent" type="hidden" value="" autocomplete="off"/>
</form>
<script type="text/javascript">
$(function(){
$('#export').click(function(){
var excelContent = $('#tablelist').html(); //获取表格内容
$('input[name=excelContent]').val(excelContent);//赋值给表单
$('#excelfromtable').submit();//表单提交,提交到php
})
})
</script>
</body>
</html>
php
<?php
echo '<meta http-equiv="Content-type" content="text/html; charset=utf-8 " />'; //设置内容,编码
header('Content-type:application/vnd.ms-excel');//设置请求头类型
header('Content-Disposition:filename=PreSortiong.xls');//设置导出格式 可以改 PreSortiong.xls 后缀成相应的格式
$content = $_POST['excelContent'];//获取表格内容 echo '<table cellpadding="1" cellspacing="1" id="" border="1" bgcolor="red">'; echo $content ; echo '</table>' ?>
使用JS和PHP导出table表格的更多相关文章
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- [js开源组件开发]table表格组件
table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- 点击导出table表格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue+file-saver+xlsx导出table表格为excel
https://blog.csdn.net/wjswangjinsheng/article/details/91393396
- 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的格式写入 ...
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- js导出Excel表格
js导出Excel表格 直接上代码: 红色部分:如果表格数据中有“1/1”这样的值,会在导出的Excel中转化为日期“1月1日”,所以才加上了红色那两句.如果返回值中没有这样的格式,红色部分可以不写. ...
- 使用js代码将HTML Table导出为Excel
使用js代码将HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type ...
随机推荐
- php+上传文件夹
一提到大文件上传,首先想到的是啥??? 没错,就是修改php.ini文件里的上传限制,那就是upload_max_filesize.修改成合适参数我们就可以进行愉快的上传文件了.当然啦,这是一般情况下 ...
- Web模糊测试:WFuzz的坑和快速入门
转载自 FreeBuf.COM 首先说下我对wfuzz这个工具的简单介绍和理解.工具主要是做web模糊测试,最开始做fuzz我是自己写个脚本配合一些常用工具来测,后来看见这款工具因为是比较简单吧,学习 ...
- MongoDB的可视化工具(Studio 3T)的安装
通过可视化工具,我们可以不用在命令行操作MongoDB了,可以直接使用类似于SQLyog的软件进行相关操作 1.下载地址(二者择其一即可),可使用迅雷来进行下载,否则下载速度极其慢 2018.4.6版 ...
- luogu P1734 最大约数和 (01 背包)
链接:https://www.luogu.org/problemnew/show/P1734 题面: 题目描述 选取和不超过S的若干个不同的正整数,使得所有数的约数(不含它本身)之和最大. 输入输出格 ...
- 【AI】【计算机】【中国人工智能学会通讯】【学会通讯2019年第01期】中国人工智能学会重磅发布 《2018 人工智能产业创新评估白皮书》
封面: 中国人工智能学会重磅发布 <2018 人工智能产业创新评估白皮书> < 2018 人工智能产业创新评估白皮书>由中国人工智能学会.国家工信安全中心.华夏幸福产业研究院. ...
- win10现在安装redis
一.下载: 下载地址: https://github.com/MicrosoftArchive/redis/releases 根据系统下载的版本:以(64位为例) 下载后一般解压到根目录下:如(E:\ ...
- 【AtCoder】AGC005
AGC005 A - STring 用一个栈,如果遇到S就弹入,如果遇到T栈里有S就弹出栈顶,否则T在最后的串里,最后计算出的T和栈里剩的S就是答案 #include <bits/stdc++. ...
- Linux基础指令--文件操作
mkdir a 创建一个名为a的文件夹 touch a.txt 创建一个名为a.txt的文件 mv b sm/ 将文件(夹)b 移动到当前目录下的sm目录下 rm -rf a 删除 a文件 -rf为参 ...
- 网络流基础&网络流24题
网络最大流 dinic+当前弧优化. const int N=10007,M=100007,inf=1e9; int s,t,head[N],ver[M],edge[M],Next[M],tot=1, ...
- python中sort和sorted用法的区别
Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列 一,最简单的排序 1.使用sort排序 my_list = [3 ...