前端JS实现导出excel表格--(可以适用于大量数据)

前端实现导出excel表格的方式有好几种,最近公司有一个项目要用到这个功能,最开始百度查到的一些例子导出数据都限制在1.5M大小。最终还是在github上面找到了答案。

<html>
<head>
    <meta charset="utf-8">
    <title>js导出excel</title>
    <script src="js/FileSaver.js"></script>
    <script>
    // https://github.com/eligrey/FileSaver.js
    function onDocumentLoad() {
        document.getElementById("export").addEventListener('click',function(){
            var blob = new Blob([document.getElementsByClassName("exportTable")[0].outerHTML], {
                type: "text/plain;charset=utf-8"
            });
            saveAs(blob,  "export.xls");
        })
    }
    document.addEventListener('DOMContentLoaded', onDocumentLoad);
    </script>
</head>
<body>
<button id="export">导出excel</button><br>
<table class="exportTable">
    

这里使用了GitHub上面的找到的一个FileSaver插件,先使用获取表格table的HTML代码(document.getElementsByClassName("exportTable")[0].outerHTML就是获取到的HTML代码及文本内容),
用前端自带的new Blob构造函数生成数据对象,这里注意type的定义,GitHub上面的type定义我使用时是乱码的;
生成的数据对象blob传给FileSaver插件的saveAs方法,"export.xls"是下载时的文件名称和格式。这样就实现了导出excel表格了。

原demo地址:https://github.com/kebingzao/fileSaver_excel
注意:原demo的Blob的type属性定义导出的excel文件中的中文文本是乱码的!!

npm包使用方式:
1、安装

npm install file-saver --save

2、require引用

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容