为了账号安全,请及时绑定邮箱和手机立即绑定

利用JavaScript所见即所得的生成Excel表格

标签:
JavaScript

笔者认为,解决问题的途径n种,也有很多组合的使用。我们用Excel导出大量数据的时候,可能会从服务器端,但如果数据量较小,是不是也可以考虑使用JavaScript就可以轻量级的导出呢。另外实际工作中,用户也会考虑,所见即所得的导出当前见到的内容到Excel表格中。
这里,笔者有那么一丢丢感想,像文档数据、文件数据、图片数据归根结底都是一些数据码,而数据码的解析方式也是分多钟的,像.html的文件可以用记事本、浏览器、编辑工具等打开。这里笔者就利用Excel能够打开html文档,投机取巧了一把后缀名是.xls哦。
JavaScript导出表格三个弊端:1、只能导出当前页面;2、若存在大量数据,则JavaScript超时崩溃;3、导出数据的同时,不可以做其他事情。因此,一些正式的、大量的数据就不要通过JavaScript生成了,小打小闹可以哦。
上代码喽,笔者亲测哦:

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <meta charset="utf-8" /></head><body>    <table border="1">        <caption>游戏级别统计表</caption>        <tr>            <th rowspan="2">序号</th>            <th rowspan="2">游戏号</th>            <th rowspan="2">姓名</th>            <th rowspan="2">性别</th>            <th rowspan="2">年龄</th>            <th colspan="3">等级</th>        </tr>        <tr>            <th>lol</th>            <th>cf</th>            <th>dnf</th>            <th>lsd</th>        </tr>        <tr>            <td>1</td>            <td>20180811</td>            <td>RedAnt</td>            <td>男</td>            <td>不详</td>            <td>80</td>            <td>双杠一星</td>            <td>80</td>            <td>213</td>        </tr>        <tr>            <td>2</td>            <td>20180812</td>            <td>HoYL</td>            <td>男</td>            <td>不详</td>            <td>81</td>            <td>双杠一星</td>            <td>80</td>            <td>999</td>        </tr>        <tr>            <td>2</td>            <td>20180813</td>            <td>Thinking</td>            <td>男</td>            <td>不详</td>            <td>81</td>            <td>双杠一星</td>            <td>80</td>            <td>999</td>        </tr>    </table>    <a download="游戏级别统计表.xls">导出表格</a>    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.min.js" ></script>    <script>        $(document).ready(function(){            var now_html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";            /*outerHTML:获取整个table元素的HTML代码(包括<table>标签),包装成一个完整的HTML文档             charset为urf-8以防止中文乱码*/            var blob = new Blob([now_html], { type: "application/vnd.ms-excel" });            /*实例化一个Blob对象             * Blob构造函数:[now_html]包含文件的数组             * { type: "application/vnd.ms-excel" }:是包含文件类型属性的对象*/            var a = document.getElementsByTagName("a")[0];            //利用URL.createObjectURL()方法为a元素生成blob URL            a.href = URL.createObjectURL(blob);        })    </script></body></html>


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消