替换IE浏览器才能识别的document.execCommand(‘SaveAs‘,false,‘Test.xls‘)两种方法

往事不堪回首..

已于 2022-04-28 11:54:07 修改

阅读量1.4k

点赞数

分类专栏：前端集文章标签： IE

于 2022-03-22 15:52:19 首次发布

原文链接：https://www.cnblogs.com/zeussbook/p/9996915.html

版权

前端集专栏收录该内容

45 篇文章 1 订阅

订阅专栏

替换原因：

document.execCommand(‘SaveAs‘,false,‘Test.xls‘)：将页面表格保存为Test.xls文件
//该方法只在IE中支持，谷歌/edge都无法识别，
//因IE不再被微软推荐使用，手上多个项目需要整改

特别注意如果导出的table中包含图片，那么这个图片地址一定是绝对路径，因为excel只会把图片链接插入excel中，而不是一起下载下来，如果图片访问路径无法打开图片那么导出也会无法显示

第一种：demo下载地址

使用基于jquery的 jquery.table2excel.js ，一款专门导入excel的插件，使用简单：

<script src="js/jquery.js"></script>  
  
    <script src="js/jquery.table2excel.js"></script>  
    <script>  
        $('button').click(function(){  
            console.log(1)  
            $("#datatable").table2excel({  
                exclude: ".noExl",  
                name: "Excel Document Name",  
                filename: "myFileName",  
                exclude_img: true,  
                exclude_links: true,  
                exclude_inputs: true  
            });  
        })  
        
        
//      table2excel插件的可用配置参数有：
//
//            exclude：不被导出的表格行的CSS class类。
//            name：导出的Excel文档的名称。
//            filename：Excel文件的名称。
//            exclude_img：是否导出图片。
//            exclude_links：是否导出超链接
//            exclude_inputs：是否导出输入框中的内容。
        
    </script>

第二种（再原文基础上修改了使用IE下载的方法，因为IE下载还是有问题）：

原文： html页面导出为excel表格 - 别动我的猫 - 博客园 (cnblogs.com)


<!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') {
        	  document.execCommand('SaveAs',false,'Test.xls');
        } 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>

往事不堪回首..

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
替换IE浏览器才能识别的document.execCommand(‘SaveAs‘,false,‘Test.xls‘)两种方法

原文：html页面导出为excel表格 - 别动我的猫 - 博客园 (cnblogs.com)document.execCommand('SaveAs',false,'Test.xls');//该方法只在IE中支持，谷歌/edge都无法识别，//因IE不再被微软推荐使用，手上多个项目需要整改借鉴网上已有的例子实现在其他浏览器正常下载页面表格到Excel：<!DOCTYPE html><html><head> <meta charse.
复制链接

扫一扫

专栏目录