找回密码
当前位置：前端开发者 > 教程 > 正文

Web页面表格导出为EXCEL文档的方法

2018-11-30 21:04:32 分类：教程 阅读(143) 评论(0)
好用的前端开发软件
计算机前端开发软件
前端能不能开发软件

ps:因为是测试页面，所以css、javascript、html都在一个页面。

<html>
html 代码

    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
        <title>页面导出为EXCEL文档的方法</title>
        <style>
            a {
                background: #ccc;
                border-radius: 5px;
                line-height: 40px;
                border: 1px solid #b4ffe5;
            }
        </style>
        <!– ie浏览器导出方法 –>
        <script type=”text/javascript”>
            <!–download
                function saveCode(obj) {
                    var winname = window.open(”, ‘_blank’, ‘top=10000’);
                    var strHTML = document.all.tableExcel.innerHTML;
                    winname.document.open(‘text/html’, ‘replace’);
                    winname.document.writeln(strHTML);
                    winname.document.execCommand(‘saveas’, ”, ‘excel.xls’);
                    winname.close();
                }
                –>
        </script>
    </head>
    <body>
        <div id=”tableExcel”>
            <table
                id=”test”
                width=”100%”
                border=”1″
                cellspacing=”0″
                cellpadding=”0″
            >
                <tr>
                    <td colspan=”5″ align=”center”>
                        web页面导出为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 colspan=”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 rowspan=”4″>合并的行</td>
                    <td>DDD</td>
                    <td>EEE</td>
                </tr>
                <tr>
                    <td>FFF</td>
                    <td>GGG</td>
                    <td>III</td>
                    <td>JJJ</td>
                </tr>
                <tr>
                    <td>aaa</td>
                    <td>bbb</td>
                    <td>ddd</td>
                    <td>eee</td>
                </tr>
                <tr>
                    <td>aaa</td>
                    <td>bbb</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>
            </table>
        </div>
        <a onclick=”saveCode(tableExcel)”>导出表格</a>
    </body>
    <!– 其他浏览器导出方法 –>
    <script>
        // 使用outerHTML属性获取整个table元素的html代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
        var html =
            “<html><head><meta charset=’utf-8′ /></head><body>” +
            document.getElementsByTagName(‘table’)[0].outerHTML +
            ‘</body></html>’
        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
        var blob = new Blob([html], { type: ‘application/vnd.ms-excel’ })
        var a = document.getElementsByTagName(‘a’)[0]
        // 利用URL.createObjectURL()方法为a元素生成blob URL
        a.href = URL.createObjectURL(blob)
        // 设置文件名，目前只有Chrome和FireFox支持此属性
        a.download = ‘测试表.xls’
    </script>
</html>
软件测试和前端开发哪个市场大
开发苹果软件前端语言
软件前端开发课程
» 本文来自：前端开发者 » 《Web页面表格导出为EXCEL文档的方法》
» 本文链接地址：https://www.rokub.com/6881.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论