js通用导出csv




/*
 * 参数:
 *    headers:表头
 *             格式如:
 *             [
 *               {
 *                  column:"userid", //列字段
 *                  title: "姓名", //表头标题
 *                  formatter:(value) =>{return ... }   //格式化函数
 *                },
 *                ...
 *              ]
 *
 *    rows:行
 *          格式如:[{userid:101,gender:0 },{userid:102,gender:1}]
 *    filename:导出保存的文件名
 */
export default function exportCsv(headers, rows, filename) {
    if (Array.isArray(headers) && headers.length > 0) { //表头信息不能为空
        if (!filename || typeof filename != "string") {
            fileName = "export.csv"
        }
        let blob = getCsvBlob(headers, rows);
        if (navigator.msSaveOrOpenBlob) {
            navigator.msSaveOrOpenBlob(blob, filename);
        } else {
            let url = URL.createObjectURL(blob);
            let downloadLink = document.createElement('a');
            downloadLink.href = url;
            downloadLink.download = filename;
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            URL.revokeObjectURL(url);
        }
    }
}

function getCsvBlob(headers, rows) {
    const BOM = '\uFEFF';
    let columnDelimiter = ','; //默认列分隔符','
    let rowDelimiter = '\r\n'; //默认行分隔符 '\r\n'
    let csv = headers.reduce((previous, header) => {
        return (previous ? previous + columnDelimiter : '') + (header.title || header.column);
    }, '');
    if (Array.isArray(rows) && rows.length > 0) {
        let columns = headers.map(header => header.column);
        csv = rows.reduce((previous, row) => {
            let rowCsv = columns.reduce((pre, column) => {
                if (row.hasOwnProperty(column)) {
                    let cell = row[column];
                    if (cell != null) {
                        let header = headers.find(item => item.column == column);
                        if (header.formatter != null && typeof (header.formatter) == "function") {
                            cell = header.formatter(cell);
                        }
                        if (cell != null) {
                            cell = cell.toString().replace(new RegExp(rowDelimiter, 'g'), ' '); // 若数据中本来就含行分隔符,则用' '替换
                            cell = new RegExp(columnDelimiter).test(cell) ? `"${cell}"` : cell; //若数据中本来就含列分隔符,则用""包起来
                            return pre ? pre + columnDelimiter + cell : pre + cell;
                        }
                    }
                    return pre ? pre + columnDelimiter + "" : pre + "";
                }
                else {
                    return pre;
                }
            }, '');
            return previous + rowDelimiter + rowCsv;
        }, csv);
    }
    let blob = new Blob([BOM + csv], { type: 'text/csv;charset=utf-8;' });
    return blob;
}

原文地址:https://www.cnblogs.com/victor-leeson/p/10708019.html

时间: 2024-10-31 17:57:47

js通用导出csv的相关文章

PHP 和 JS 导入导出csv表格(上)

CSV简介 在开发后台管理系统的时候,几乎无可避免的会遇到需要导入导出Excel表格的需求.csv也是表格的一种,其中文名为"逗号分隔符文件".在Excel中打开如下图左边所示,在记事本打开如下图右边所示: 再看包含特殊字符的表格 与xls或xlsx 表格相类似,CSV文件也是用来表示二维表格.而不同的是: 1.CSV是一种纯文本文件,任何编辑器都能打开并读取它:xls(x)是专用的二进制文件,要用表格软件才能正常打开,否则乱码: 2.CSV的体积很小,比如上面的表格内容,csv只有几

Java Js实现导出csv

1 $.ajax({ 2 type: 'GET', 3 async: false, 4 url: '../../api/screening/exportTable?seriesIndex=' + param.seriesIndex +'&dataIndex=' + param.dataIndex + '&package1=' + mode, 5 success: function(data) { 6 JSONToCSVConvertor(JSON.stringify(data), titl

前端js导出CSV,Excel格式文件

通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用"\n"和","拼接成一个字符串,然后把字符串放到href中,这种方法只支持chrome,firefox等非ie浏览器 html页面代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf

Web 端 js 导出csv文件(使用a标签)

前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这个需求肯定是有答案的,只是对于各浏览器处理会稍微不一样.(主要是IE 和其他浏览器的区别). 在IE中使用ActiveXObject 实现,在firefox 和Chrome 中使用  a 标签(或者js)就可以实现了. 这里主要讲一下其他浏览器中的实现. 使用 a 标签实现方式 直接上例子: 1 <

【转载】JS导出CSV文件

转自:http://www.cnblogs.com/dengnan/p/3990211.html 通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用"\n"和","拼接成一个字符串,然后把字符串放到href中,这种方法只支持chrome,firefox等非ie浏览器 html页面代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv="conten

mysql导出csv

原网页 http://www.web-jia.com/view.php?a=12 今天有的需求要一些数据,现在这套系统用了mysql数据库了,没有sqlserver导出数据那么简单了 要数据想到最简单的当然是导出csv了 查了一下有outfile 可以用稍微设置一下就可以了还是挺不错的 select * from player into outfile 'd:/out.csv' fields terminated by ',' optionally enclosed by '' lines te

web前端导出csv文件

前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这个需求肯定是有答案的,只是对于各浏览器处理会稍微不一样.(主要是IE 和其他浏览器的区别). 在IE中使用ActiveXObject 实现,在firefox 和Chrome 中使用  a 标签(或者js)就可以实现了. 这里主要讲一下其他浏览器中的实现. 使用 a 标签实现方式 直接上例子: [ht

使用PHP导入和导出CSV文件

1.配置文件:connect.php <?php $host="localhost"; $db_user="root"; $db_pass="root"; $db_name="wh"; $timezone="Asia/Shanghai"; $link=mysql_connect($host,$db_user,$db_pass); mysql_select_db($db_name,$link); mys

网页前端导出CSV,Excel格式文件

通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用“\n”和“,”拼接成一个字符串,然后把字符串放到href中,这种方法只支持chrome,firefox等非ie浏览器 html页面代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <met