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

4,898 阅读1分钟

前端实现导出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地址:github.com/kebingzao/f…

注意:原demo的Blob的type属性定义导出的excel文件中的中文文本是乱码的!!

npm包使用方式:

1、安装

npm install file-saver --save
bower install file-saver

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");