AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端js实现打印excel表格

2023-11-08 121
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端js实现打印excel表格

产品原型：

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

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>
文章标签：
JavaScript
前端开发
Java
关键词：
JavaScript前端
前端js
excel表格
前端表格
前端excel
祈澈菇凉
目录
相关文章
代码掌控者
|
28天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
43 1
yuanzhengme
|
1月前
|
Java API Apache
Java编程如何读取Word文档里的Excel表格，并在保存文本内容时保留表格的样式？
【10月更文挑战第29天】Java编程如何读取Word文档里的Excel表格，并在保存文本内容时保留表格的样式？
yuanzhengme
131 5
你都不懂
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
48 0
2G冲浪词条
|
25天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题，javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题，并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先，在Spring Boot应用中添加一个实现了`Filter`接口的类，设置响应头允许所有来源的跨域请求。接着，通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL，验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
2G冲浪词条
32 3
springboot解决js前端跨域问题，javascript跨域问题解决
左诗右码
|
29天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中，后端与前端的数据交换常使用JSON格式，但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数，超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包，介绍如何通过将大整数以字符串形式序列化和反序列化，有效解决这一问题，确保前后端数据交换的准确性。
左诗右码
35 4
TENGZO
|
1月前
|
SQL 数据可视化 数据挖掘
想让Excel表格设计更美观？试试这几款好用工具！
Excel表格设计在项目管理和数据分析中至关重要。本文推荐四款辅助工具：板栗看板、Excel自动图表助手、Think-Cell Chart 和 Power BI，分别在任务管理、图表生成、数据可视化等方面表现突出，帮助你设计出更专业、美观的表格。
TENGZO
68 2
想飞的雪糕
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门：Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络，包括前馈神经网络（FFNN）、深度神经网络（DNN）和循环神经网络（RNN）。通过简单的示例和代码，帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景，并简要介绍了卷积神经网络（CNN）的替代方案。
想飞的雪糕
111 1
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面，开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面，涉及多种特效实现，如动态图片切换和人物聚合效果。作品源码已上传至CSDN，视频效果可在CSDN预览。
进步`于辰
40 0
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
土木林森
|
1月前
|
JavaScript 前端开发 开发者
前端框架对比：Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域，Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣，Vue.js以轻量级和易上手著称，适合快速开发小型到中型项目；Angular则由Google支持，功能全面，适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
土木林森
47 1
土木林森
|
1月前
|
JavaScript 前端开发 API
前端框架对比：Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架，介绍了它们的特点和优劣，并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手，适合小型项目；Angular结构化、功能强大，适合大型项目。
土木林森
35 1

热门文章

最新文章

  • 1
    RDS入门——Excel文件转存到RDS数据库实践
  • 2
    Excel 2010 打开加速方法
  • 3
    [SilverLight]DataGrid实现批量输入(like Excel)（补充）
  • 4
    Java Poi 创建与读取Excel
  • 5
    Excel自动筛选、单元格选择不同的值显示不同的颜色、第一行不动
  • 6
    Python三行代码实现json转Excel
  • 7
    C#中如何在Excel工作表创建混合型图表
  • 8
    C#：GridView导出Excel，以及runat=server错误处理方法
  • 9
    扩展gridview的导出excel功能乱码问题的解决
  • 10
    最简单的excel数据插入mysql（适合比较少的数据量）
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    54
  • 2
    js设计模式-观察者模式与发布/订阅模式
    72
  • 3
    js设计模式-策略模式与代理模式的应用
    72
  • 4
    深入理解JavaScript中的闭包机制
    60
  • 5
    使用Vue.js构建交互式前端的技术探索
    88
  • 6
    使用Node.js构建实时聊天应用的技术指南
    132
  • 7
    深入理解JavaScript中的事件循环机制
    89
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    121
  • 9
    JavaScript 数组方法概览
    38
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    66

    • 相关课程

    更多
  • 移动Web前端开发
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    DataWorks