前端实现table表格导出excel

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .tb-head{

            background-color: #ccc;

        }

    </style>

<head>

<script type="text/javascript" language="javascript">
　　　　//处理除了行内样式以外的css样式，导出excel时只能读取到行内样式，要讲非行内样式转化成行内样式

        window.onload = function(){

            var tbhead = document.getElementsByClassName("tb-head");

            var computedStyle = document.defaultView.getComputedStyle(tbhead[0], null);

            console.log(computedStyle.backgroundColor);

            tbhead[0].style.backgroundColor = computedStyle.backgroundColor;

        }

        var idTmr;

        function  getExplorer() {

            var explorer = window.navigator.userAgent ;

            //ie

            if (explorer.indexOf("MSIE") >= 0) {

                return 'ie';

            }

            //firefox

            else if (explorer.indexOf("Firefox") >= 0) {

                return 'Firefox';

            }

            //Chrome

            else if(explorer.indexOf("Chrome") >= 0){

                return 'Chrome';

            }

            //Opera

            else if(explorer.indexOf("Opera") >= 0){

                return 'Opera';

            }

            //Safari

            else if(explorer.indexOf("Safari") >= 0){

                return 'Safari';

            }

        }

        function method1(tableid) {//整个表格拷贝到EXCEL中

            if(getExplorer()=='ie')

            {

                var curTbl = document.getElementById(tableid);

                var oXL = new ActiveXObject("Excel.Application");

                //创建AX对象excel

                var oWB = oXL.Workbooks.Add();

                //获取workbook对象

                var xlsheet = oWB.Worksheets(1);

                //激活当前sheet

                var sel = document.body.createTextRange();

                sel.moveToElementText(curTbl);

                //把表格中的内容移到TextRange中

                sel.select;

                //全选TextRange中内容

                sel.execCommand("Copy");

                //复制TextRange中内容

                xlsheet.Paste();

                //粘贴到活动的EXCEL中

                oXL.Visible = true;

                //设置excel可见属性

                try {

                    var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");

                } catch (e) {

                    print("Nested catch caught " + e);

                } finally {

                    oWB.SaveAs(fname);

                    oWB.Close(savechanges = false);

                    //xls.visible = false;

                    oXL.Quit();

                    oXL = null;

                    //结束excel进程，退出完成

                    //window.setInterval("Cleanup();",1);

                    idTmr = window.setInterval("Cleanup();", 1);

                }

            }

            else

            {

                tableToExcel(tableid)

            }

        }

        function Cleanup() {

            window.clearInterval(idTmr);

            CollectGarbage();

        }

        var tableToExcel = (function() {

                var uri = 'data:application/vnd.ms-excel;base64,',

                    template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',

                    base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },

                    format = function(s, c) {

                                return s.replace(/{(\w+)}/g,

                                function(m, p) { return c[p]; })

                            };

                return function(table, name) {

                        debugger;

                        if (!table.nodeType) table = document.getElementById(table);

                        var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};

                        window.location.href = uri + base64(format(template, ctx));

                    }

        })()

    </script>

</head>

<body>

<!-- <table id="ta">

  <tr>

    <td>1</td><td>admin</td>

    <td>23</td><td>程序员</td>

    <td>天津</td><td>admin@kali.com</td>

  </tr>

  <tr>

    <td>2</td><td>guest</td>

    <td>23</td><td>测试员</td>

    <td>北京</td><td>guest@kali.com</td>

  </tr>

</table> -->

<table id="tb" border=4 width=250 align=center>

        <caption>【表格举例】</caption>

        <tr class="tb-head">

            <th><br></th>

            <th>列-A</th>

            <th>列-B</th>

            <th>列-C</th>

        </tr>

        <tr align=center>

            <td>行-1</td>

            <td>A1</td>

            <td>B1</td>

            <td rowspan=2>C1-C2</td>

        </tr>

        <tr align=center>

            <td>行-2</td>

            <td>A2</td>

            <td>B2</td>

        </tr>

        <tr align=center>

            <td>行-3</td>

            <td>A3</td>

            <td colspan=2>A3-B3</td>

        </tr>

    </table>

<input id="Button1" type="button" value="导出EXCEL"

        onclick="method1('tb')" />

</body>

</html>

前端实现table表格导出excel的更多相关文章

vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
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; ...
Element-ui组件库Table表格导出Excel表格
安装npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsxhttps://github.c ...
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的格式写入 ...
【前端】将前台table数据导出excel表格
1.首先引用jquery以及table2excel <script type="text/javascript" src="js/jquery.table2exce ...
前端Table数据导出Excel使用HSSFWorkbook(Java)
一.实现原理: 1. 前端查询列表数据并渲染至table(<table>...</table>)表格 2. 表格html代码传输至后台 3. 后台把html转成Excel输出流 ...
纯JS 将table表格导出到excel
html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...
Vue项目中将table组件导出Excel表格以及打印页面内容
体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html 页面中显示的table表格,经常 ...
js操作table表格导出数据到excel方法
js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...

随机推荐

DICOMDIR结构
DICOMDIR文件结构: 格式: DICOMDIR文件遵照DICOM文件的存储格式,需要有128个无意义字节的前言(假如没有特殊要求,这些字节都为00H),紧接着是DICOM前缀(长度为4字节的“D ...
windows服务器提权前请先执行systeminfo命令
pr.巴西烤肉对应补丁好多朋友见到Windows服务器就祭出pr.巴西烤肉一气搞,忙完免杀又忙找可写目录,最后发现服务器打上了对应的补丁.笔者在提权前都会执行systeminfo命令,查看对应补丁 ...
Android -- 经验分享（三）
目录获取系统版本号获取系统信息获取安装路径和已安装程序列表获取图片.应用名.包名解决listview上Item上有按钮时item本身不能点击的问题不让文本框输入中文获取屏幕宽高将Tab ...
beyond compare 比较Xls文件时只显示有差异的列
beyond compare是专业级的文件比较工具,可以比较所有的文件格式,已经成为我工作中的必备软件在某一个工作项目中需要比较两个Xls文件,两个文件列是相同的,主要是看两个文件的列内容有什么变化 ...
一个异常org.apache.jasper.JasperException: java.lang.IllegalStateException: No output folder:的解决
今天对一个WebApp做完修改,导出成war包,再发布到Tomcat7中,居然访问不了了! 同样的问题一周前也出现过,后来一顿鼓捣,又莫名其妙好了,当时认为是Tomcat7闹点小毛病,也没多想. 但是 ...
.NET破解之PDF编辑器
本教程只能用于学习研究,不可进行任何商业用途.如有使用,请购买正版,尊重他人劳动成果和知识产权! 第一效果团队(1XG Team)组建于2004年,并长期致力于WINDOWS平台应用软件开发,产品主要 ...
ObjectMapper处理从远程获取的Object对象（http://bbs.csdn.net/topics/390337813?page=1）这个网址也有讲解
微服务中从其他服务获取过来的对象,如果从Object强转为自定义的类型会报错,利用ObjectMapper转换. ObjectMapper mapper = new ObjectMapper(); D ...
Shodan：黑客的物联网搜索引擎
记得看过一个电影.里面的科学家开发了一个超级系统,能够实时监控全部可用摄像头.让逃犯无处遁形. Shodan这个新型的搜索引擎可能会让这个想法变成现实. 和Google这些传统互联网信息搜索引擎不同. ...
Cg入门21：Fragment shader - 2D纹理採样
体纹理:是啥? tex2D 曾经仅仅能在Fragment程序中纹理採样 UV坐标系:事实上点为左下角,范围为[0,1].U为x轴,V为y轴 watermark/2/text/aHR0cDovL2Jsb ...
Emitting signals
Objects created from a QtCore.QObject can emit signals. In the following example we will see how we ...

前端实现table表格导出excel

前端实现table表格导出excel的更多相关文章

随机推荐

热门专题