js导出excel

最新推荐文章于 2022-06-27 22:03:11 发布
最新推荐文章于 2022-06-27 22:03:11 发布
阅读量147 收藏 1
点赞数
分类专栏： JavaScript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41893551/article/details/81634881
版权

 第一种，我认为最好用的方法

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
 
    <body link="blue" vlink="purple">
        <table id="print-content" border="1" cellpadding="0" cellspacing="0" style='border-collapse:collapse;table-layout:fixed;'>
            <colgroup>
                <col width="80 ">
                <col width="80 ">
                <col width="150 ">
                <col width="80 ">
                <col width="150 ">
                <col width="80 ">
                <col width="80 ">
            </colgroup>
            <tr height="20" style="text-align: center;font-size:18px">
                <td colspan="7">会签单</td>
            </tr>
            <tr height="20" style="text-align: center;font-size:14px">
                <td></td>
                <td colspan="2">流转</td>
                <td></td>
                <td colspan="3">会议</td>
            </tr>
            <tr height="20" style="text-align: center;font-size:14px">
                <td>名称</td>
                <td colspan="2">自动获取</td>
                <td>编号</td>
                <td colspan="3">自动获取</td>
            </tr>
            <tr height="20" style="text-align: center;font-size:14px">
                <td>主持</td>
                <td colspan="2">自动获取</td>
                <td>类型</td>
                <td colspan="3">自动获取</td>
            </tr>
            <tr height="20" style="text-align: center;font-size:14px">
                <td>人</td>
                <td colspan="2">自动获取</td>
                <td>日期</td>
                <td colspan="3">自动获取</td>
            </tr>
            <tr height="100" style="text-align: center;font-size:14px">
                <td rowspan="5">内容</td>
                <td colspan="6" rowspan="5">自动获取</td>
            </tr>
            <tr/>
            <tr/>
            <tr/>
            <tr/>
            <tr height="20" style="text-align: center;font-size:14px">
                <td>备注</td>
                <td colspan="6">自动获取</td>
            </tr>
            <tr height="24" style="text-align: center;font-size:16px">
                <td colspan="7">意见</td>
            </tr>
            <tr height="24" style="text-align: center;font-size:14px">
                <td>序号</td>
                <td>人</td>
                <td>部门</td>
                <td>意见</td>
                <td>时间</td>
                <td>节点</td>
                <td>状态</td>
            </tr>
            <tr height="20" style="text-align: center;font-size:14px">
                <td>1</td>
                <td>顾</td>
                <td>办公室</td>
                <td>同意！</td>
                <td>2018/5/14 15:21</td>
                <td></td>
                <td>已提交</td>
            </tr>
        </table>
        <!-- 下载方法1.超链接_导出文件-->
        <a id="print-click">超链接_导出表格</a>
        <!-- 下载方法2.引入文件保存js-->
        <input type="button" onclick="download()" value="函数_导出表格"></input>
        <input type="button" onclick="printout()" value="打印"></input>
        <!-- 下载方法2.引入文件保存js-->
        <script type="application/javascript" src="js/FileSaver.js" ></script>
        <script>
            // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
            var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";
            // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
            var blob = new Blob([html], {
                type: "application/vnd.ms-excel"
            });
            var a = document.getElementById("print-click");
            // 利用URL.createObjectURL()方法为a元素生成blob URL
            a.href = URL.createObjectURL(blob);
            // 设置文件名，目前只有Chrome和FireFox支持此属性
            a.download = "会签单.xls";
 
            function download() {
                debugger
                    // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
                    var html2 = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";
                    // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
                    var blob2 = new Blob([html2], {
                        type: "application/vnd.ms-excel"
                    });
                    saveAs(blob2, "应系单.xls");
            };
              //打印具体实现代码
           function printout() {
                debugger;
                var newWindow;
                //打开一个新的窗口  
                newWindow = window.open();
                // 是新窗口获得焦点  
                newWindow.focus();
                //保存写入内容  
                var newContent = "<html><head><meta charset='utf-8'/><title>打印</title></head><body>"
                newContent += document.getElementById("print-content").outerHTML;
                newContent += "</body></html>"
                // 将HTML代码写入新窗口中  
                newWindow.document.write(newContent);
                newWindow.print();
                // close layout stream 
                newWindow.document.close();
                //关闭打开的临时窗口
                newWindow.close();
                return false;
           };
        </script>
    </body>
 
</html>

 

 

 

 第二种

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>html 表格导出</title>  
    <script language="JavaScript" type="text/javascript">  
        //第五种方法  
        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>{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>  
</head>  
<body>  

<div >  
    <button type="button" onclick="method1('tableExcel')">导出Excel方法一</button>  
    <button type="button" onclick="method2('tableExcel')">导出Excel方法二</button>  
    <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv')">导出Excel方法三</button>  
    <button type="button" onclick="method4('tableExcel')">导出Excel方法四</button>  
    <button type="button" onclick="method5('tableExcel')">导出Excel方法五</button>  
</div>  
<div id="myDiv">  
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">  
    <tr>  
        <td colspan="5" align="center">html 表格导出道Excel</td>  
    </tr>  
    <tr>  
        <td>列标题1</td>  
        <td>列标题2</td>  
        <td>类标题3</td>  
        <td>列标题4</td>  
        <td>列标题5</td>  
    </tr>  
    <tr>  
        <td>aaa</td>  
        <td>bbb</td>  
        <td>ccc</td>  
        <td>ddd</td>  
        <td>eee</td>  
    </tr>  
    <tr>  
        <td>AAA</td>  
        <td>BBB</td>  
        <td>CCC</td>  
        <td>DDD</td>  
        <td>EEE</td>  
    </tr>  
    <tr>  
        <td>FFF</td>  
        <td>GGG</td>  
        <td>HHH</td>  
        <td>III</td>  
        <td>JJJ</td>  
    </tr>  
</table>  
</div>  
</body>  
</html>

 

水机.Threeki
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS导出excel插件总结
Tianyi_liang的博客
03-17 3万+
目前找到的几种用来导出Excel的插件就是这些，其余的还有一个需要jQuery2.0以上的版本，或者是不更新了的，就不在这里了ExcellentExport.js–Table to Excel后面半句是我加的，它主要就是个抓取table标签，然后导出为Excel的插件，支持导出xls、CSV，很简单的一款插件，参数填上table id即可： 优点：傻瓜式导出table 缺点：功能单一，比较局限。
纯js的excel导出插件
ivy19860929的专栏
03-10 4358
在不影响服务器性能的前提下前端导出table内容为excel文件 /** 使用示例 自动绑定 table_to_excel 导出 $(".to_excel").click(function(event){ var t = Itable2excel({ worksheet:'数据分析', table: $('#order-list table') }); var data6
js导出excel插件
07-26
js导出excel插件，需要配置为网站
JS导出导入Excel文件插件,简单易用
03-01
JS导出导入Excel文件插件, 简单好用,含有Demo,运行就懂!
js常用插件(四)之jsonExportExcel导出表格(后台系统必备)
小龚的博客
01-13 1915
js常用插件之jsonExportExcel导出表格(后台系统必备) 欢迎点击: 个人官网博客 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
HTML用JS导出Excel的五种方法.javascript导出excel的5种方法
01-09
导出Excel文件时，需要创建一个工作表对象，然后加入到工作簿中，最后将其转换为二进制数据并下载。 ```javascript // 安装js-xlsx npm install xlsx import * as XLSX from 'xlsx'; function exportToExcel(data...
js导出Excel表格超出26位英文字符的解决方法ES6
10-19
在处理JavaScript导出Excel表格的过程中，开发者们经常会遇到一些特有的技术挑战。例如，在某些情况下，导出的数据会涉及到超出26位英文字符的字段，这可能会影响到Excel表格中列的显示与格式。本文提供了使用ES6...
javaScript 导出excel文件
12-06
JavaScript 导出 Excel 文件 JavaScript 导出 Excel 文件是指使用 JavaScript 语言将 HTML 表格数据导出到 Excel 文件中的过程。在本文中，我们将探讨如何使用 JavaScript 实现 Excel 文件的导出，并介绍相关的技术...
js导出excel.zip
04-22
在JavaScript编程领域，导出Excel是一项常见的需求，特别是在Web应用中，用户可能需要将数据显示在Excel表格中以便进一步处理或存储。"js导出excel.zip"这个压缩包提供了一个解决方案，它结合了EasyUI和DataGrid组件...
elementuiplus+vue3+sheetjs导出excel不需要filesave依赖
06-13
elementui+vue3+sheetjs导出excel不需要filesave依赖 安装依赖 pnm install xlsx
导出Excel功能插件 xlsx.full.min.js
02-21
适用于 https://blog.csdn.net/weixin_44875164/article/details/123061428 中的Excel导出功能
jQuery插件将HTML表格导出为Excel格式文件 - tableexport.js插件
06-29
jQuery插件将HTML表格导出为Excel格式文件 - tableexport.js插件，jQuery插件将HTML表格导出为Excel格式文件 - tableexport.js插件（html）
js导出页面的excel
11-28
js导出页面的excel， jquery.base64.js ：解决中文乱码的问题 tableExport.js ： 导出excel 插件
jquery插件将html表格导出为excel格式文件tableexport.js插件
03-07
jquery插件将html表格导出为excel格式文件，点击按钮一键导出，只需要引入js，写几行代码块就可完成导出功能，写可修改，有案例。 tableexport.js插件
前台插件导出excel，自带js，亲测可用
03-15
插件导出Excel，亲测可用 ，完整demo，代码全，不走后台
基于xlsx.js的导入导出插件 lay-excel , 操作更方便 功能更强大
qq_18816201的博客
06-27 1607
话不多说, 上图功能演示地址： http://excel.wj2015.com文档地址： 概览 · LAY-EXCEL 插件文档 1. 创建个vue2空项目(具体步骤省略 详情看上一篇)2. 安装依赖3. main.js导入UI插件注释齐全 复制即可拿来用, 若功能不满足, 可查看文档↓导出excel样式设置时间处理...
【前端使用插件js-export-excel导出excel】
limuzhixing的博客
06-06 2239
前端导出excel
vue[前端js操作进行excel导入导出的插件收集与使用]
墨水白云的博客
12-11 2183
最近在一个项目中遇到了要前端来对表格数据进行导入和导出相关的操作。然后第一印象就是要到网上找个比较靠谱而且使用多的npm插件来用用。找了许久，发现了几款不错的插件以及一些原生的方式，现在记录下来。
JS导出excel
翱翔的天空的博客
04-29 983
接口返回json数据 js生成excel此外需要这两个依赖 <script th:src="@{/js/xlsx.full.min.js}"></script> <script th:src="@{/js/shim.min.js}"></script> 下载地址 exports2:function (data) { ...
javascript导出excel
最新发布
08-27
要使用JavaScript导出Excel，可以使用以下几种方法： 1. 使用第三方库：可以使用像js-xlsx、SheetJS等第三方库来导出Excel文件。这些库提供了一组功能强大的API，可以轻松地创建和导出Excel文件。你可以在你的项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值