前端js实现打印excel表格

产品原型:

图片.png

功能需求:点击导出考勤表格按钮,会自动下载成Excel格式

图片.png

图片.png

jsp页面代码:

<div class="tools">
<button type="button" class="btn green" id="excell"  onclick="method5(‘dataTable‘)">导出考勤表</button>
</div>

js代码

//打印表格
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 method5(tableid) {
        if (getExplorer() == ‘ie‘) {
            var curTbl = document.getElementById(tableid);
            var oXL = new ActiveXObject("Excel.Application");
            var oWB = oXL.Workbooks.Add();
            var xlsheet = oWB.Worksheets(1);
            var sel = document.body.createTextRange();
            sel.moveToElementText(curTbl);
            sel.select();
            sel.execCommand("Copy");
            xlsheet.Paste();
            oXL.Visible = true;

            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);
                oXL.Quit();
                oXL = null;
                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><head><meta charset="UTF-8"></head><body><table  border="1">{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) {
            if (!table.nodeType)
                table = document.getElementById(table)
            var ctx = {
                worksheet : name || ‘Worksheet‘,
                table : table.innerHTML
            }
            window.location.href = uri + base64(format(template, ctx))
        }
    })()

完整的可复制黏贴的demo:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div class="tools">
            <button type="button" class="btn green" id="excell" onclick="method5(‘dataTable‘)">导出考勤表格</button>
        </div>

        <table border="1" id="dataTable">
            <tr>
                <td>王婷111</td>
                <td>一见倾城333 </td>
            </tr>
            <tr>
                <td>祈澈姑娘222</td>
                <td>Python开发者交流平台44</td>
            </tr>
            <tr>
                <td>wwwangting888</td>
                <td>13661725475</td>
            </tr>
        </table>

    </body>
    <script>
        //打印表格
        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 method5(tableid) {
            if(getExplorer() == ‘ie‘) {
                var curTbl = document.getElementById(tableid);
                var oXL = new ActiveXObject("Excel.Application");
                var oWB = oXL.Workbooks.Add();
                var xlsheet = oWB.Worksheets(1);
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                sel.select();
                sel.execCommand("Copy");
                xlsheet.Paste();
                oXL.Visible = true;

                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);
                    oXL.Quit();
                    oXL = null;
                    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><head><meta charset="UTF-8"></head><body><table  border="1">{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) {
                if(!table.nodeType)
                    table = document.getElementById(table)
                var ctx = {
                    worksheet: name || ‘Worksheet‘,
                    table: table.innerHTML
                }
                window.location.href = uri + base64(format(template, ctx))
            }
        })()
    </script>

</html>
时间: 2024-11-10 14:38:19

前端js实现打印excel表格的相关文章

使用Windows驱动的虚拟打印机,打印Excel表格无表格线问题解决(2)

测试: 经前天的测试,最终还是没有明显的定夺到底是驱动的问题,还是打印机的问题.但是按照可能性来排查,最明显的一点就是其他测试环境不变的情况下增加一张图片,就可以打印出表格线,我始终觉得这里是突破点,但是一时又没了思路. 于是想看一下word中存在表格的时候会不会有同样的问题,遗憾的是没有,为此我暂定为是Office的Bug,上google搜索关键字,office excel can not print gridlines,幸运的似乎看到了相同的问题:http://209.116.186.218

前端JS脚本将网页表格导出为Excel

话不多说,上代码! <!DOCTYPE> <html> <head> <title>Excel Test</title> </head> <body> <div style="width:100%;padding:40px;"> Excel Test </div> <table id="excel"> <tr> <td>Na

【JS】打印Excel——ActiveX控件

1 function viewToExcel(){ 2 var filepath = "f:\\PrinterExcel.xls"; 3 var xlApp; 4 var xlBook; 5 var xlSheet; 6 try { 7 xlApp = new ActiveXObject("Excel.Application"); 8 } 9 catch (e) { 10 alert("请调整IE安全选项"); 11 return; 12 } 1

excel表格如何排版打印比较全面的视频教程今晚限量秒杀

如何打印出漂亮的Excel表格? 在办公的时候经常需要打印Excel表格,在Excel打印的时候,我们很可能需要调整格式,行间距什么的,现整理出课程详细章节纲要, 课程教程地址:http://edu.51cto.com/sd/46462 课程章节计划表:第一章:输出打印概述第二章:安装打印机驱动及注意事项第三章:将表格充满A4纸并打印网格线第四章:横向打印和竖向打印第五章:打印指定区域的数据内容第六章:在报表每页打印图片或公司图标第七章:为报表背景添加水印文字1.快速制作水印图片2.为excel

js 实现打印功能

前端js实现打印功能的两种方式: 1.利用iframe,隐藏iframe,直接通过按钮直接打印,弹出打印设置页面. <button onclick="doPrint();">print</button> <iframe style="display:none" id="printIframe" frameBorder=0 scrolling=no width="100%" src="./

用Node.js 将bugzilla上的bug列表导入到excel表格里

公司用bugzilla管理产品bug,最近用Node.js做了个东西,方便能够把bug的相关信息导入到excel表格里,好做后续的管理分析. 直接贴代码,写上注释好了.转载请注明出处. var request = require("request") var cheerio = require("cheerio"); var Excel = require('exceljs'); var colors = require("colors"); v

node.js 操作excel 表格与XML文件常用的npm

在日常工作中会经常用到把一些excel表格文件转化为json,xml,js等格式的文件,下面就是我在日常中用到的这些npm. 1.node-xlsx: node-xlsx可以把excel文件转化为上面说所的几种文件格式,常用方式可以查看github的源码与实例:node-xlsx 在操作文件中直接引用 var xlsx = require("node-xlsx"); 读取excel var list = xlsx.parse("./excel/" + excelNa

Excel表格从指定部分重新分页打印的两种方法

Excel表格现在已经成为了一个极其重要的办公工具,尤其是在数据处理方面,它可以进行各种数据的处理.统计分析和辅助决策操作,但是在日常工作中我们经常对一些功能无从下手,例如在进行表格内容打印时,需要将其中内容从某行开始从新的一张纸继续打印,但是往往会发现内容会连续打印,保证每一页都不留空白.下面就通过具体的例子教大家如何让Excel表格内容从指定部分重新分页固定打印. Excel表格从指定部分重新分页打印的方法一 1.如图所示,是一份共10页的表格文档,每一页均是连续打印的,现假设需要让文档从第

[node 工具] 用 Node.js 将 bugzilla 上的 bug 列表导入到 excel 表格在线版本之一(server 端)

之前写了个 用 Node.js 将 bugzilla 上的 bug 列表导入到 excel 表格里 的 cli 工具虽然可以用,但考虑到一下几点,总觉得需要再做点什么. 界面简陋,我那截图上是在 VSCode 下的 git bash 里使用的,看起来倒还好一些.如果是在 CMD 下使用,不忍直视. 需要使用命令的方式启动,URL 地址还需要添加双引号,体验不好. 需要自行安装 nodejs 环境 因此我将这个工具做成了在线的版本,只要复制个 URL,点击开始,傻瓜操作,多人使用. 1 var e