前端导出excel/csv文件

安装所需js

fileSaver
Blob

安装基于npm,先确认安装了nodeJS。进入项目目录，在根目录下打开终端执行行以下代码

npm install file-saver --save

bower install file-saver

安装完成后可以看到在node_modules文件里新增的文件夹file-saver和filesaver 其中 filesaver文件夹为filesaver.js源码

引用fileSaver

在需要下载导出页面对应的JS文件处引入filesaver文件

import FileSaver from 'file-saver';

const {saveAs} = FileSaver;

新建Blob对象

BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。(来自百度百科)

var Blob = new Blob(["JSON"],{type:''})

blob的结构

Blob(blobParts[, options])

引用saveAs

saveAs(Blob,filename,boolean)

第三个参数boolean如果传true filesaver.js就不会对你的文件自动设置类型

new Blob有浏览器兼容问题，如需考虑浏览器兼容问题，需要引入Blob.js

demo

function Clickhandle (){
    var blob = new Blob
            (
                ["Hello, world!"], 
                {type: "text/plain;charset=utf-8"}
            );

    saveAs(blob, "hello world.txt");
}

注意下载导出功能只能写在事情回调函数里，如某个button的onClick事件中

导出文件类型

var exportContent = "\uFEFF";
var blob = new Blob([exportContent+data("")], 
    {type: "text/plain;charset=utf-8"}
);
saveAs(blob, downloadName + ".csv");

excel

var exportContent = "\uFEFF";
var blob = new Blob([exportContent+data("")], {
            type: "application/vnd.ms-excel;charset=charset=utf-8"
        });
saveAs(blob, downloadName + ".xls");

其中加入exportContent = "\uFEFF";可以防止中文乱码

导出excel/csv格式文件