如何将汇总后的数据下载到CSV文件?

aki发表于:2016年10月07日 17:29:31更新于:2019年01月31日 17:18:28

 kintone里有将数据导出到CSV文件的功能。通常情况下,这个功能就足够用了。但是有时候需要下载特殊情况下的数据,比如对多个应用的数据进行统计后的数据、或使用kintone.proxy()从其他产品获取到的数据。

这里向大家介绍通过kintone自定义下载CSV文件的技巧。下面要说明的这个例子非常简单:将含有column1和column2这两个字段的记录导出到CSV。而实际上,使用这些方法,kintone上的所有数据都可以导出到文件。

(function() {
    "use strict";
     
    // 记录列表显示时的事件
    kintone.events.on('app.record.index.show', function(events) {
     
        var $link = $('#download-csv');
        if ($link.length === 0) {
            //在页眉处创建链接
            var $header = $(kintone.app.getHeaderMenuSpaceElement());
            $link = $('<a id="download-csv" href="#">通过CSV下载</a>');
            $header.append($link);
        }
         
        // 转义
        var escapeStr = function(value) {
            return ' " ' + (value ? value . replace(/"/g, '""') : '') + ' " ';
        };
         
        if ((window.URL || window.webkitURL).createObjectURL === null) {
            // 不支持的浏览器
            return;
        }
         
        // 创建CSV数据
        var csv = [];
        var row = ['ID', 'column1', 'column2'];
        csv.push(row);
        for (var i = 0; i < events.records.length; i++) {
            var record = events.records[i];
            row = [];
            row.push(escapeStr(record['记录编号'].value));
            row.push(escapeStr(record['column1'].value));
            row.push(escapeStr(record['column2'].value));
            csv.push(row);
        }
         
        // 使用带BOM的方式下载
        var csvbuf = csv.map(function(e) {return e.join(','); }).join('\r\n');
         
        var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
        var blob = new Blob([bom, csvbuf], { type: 'text/csv' });
         
        var url = (window.URL || window.webkitURL).createObjectURL(blob);
         
        var fileName = "download.csv";
        if (window.navigator.msSaveOrOpenBlob) {
            // for IE
            $link.unbind();
            $link.click(function() {
                var retVal = window.navigator.msSaveOrOpenBlob(blob, fileName);
            });
        } else {
            $link.attr('download', fileName);
            $link.attr('href', url);
        }
    });
})();

※这个范例需要用到jQuery。

本范例使用window.URL.createObjectUrl方法生成Blob对象的下载URL。关于window.URL.createObjectUrl的说明以及可支持的浏览器,请参考MDN的文档。IE对下载URL有限制,需要使用IE10及以上版本才可支持的mSaveOrOpenBlob,动态下载数据。

kintone中使用的文字编码为UTF-8。用UTF-8导出的CSV文件无法用Excel打开,需要在文件前面加上BOM(Byte Order Mark),才可通过Excel打开。如果无论如何都想使用Shift-JIS输出,可以使用外部库转换编码。这里以polygon写的encoding.js (MIT or GPL v2 licenses)为例进行说明。

※encoding.js是由polygon提供的开放源库。
请仔细阅读注意事项,对该内容的使用,完全出于您自己的判断,由您自己承担责任。

从第39行到第44行进行如下编辑。

 // 创建字符串数组
        var str2array = function(str) {
            var array = [ ], i, il = str.length;
            for (i = 0; i < il; i++) array.push(str.charCodeAt(i));
            return array;
        };
         
        // 转换为SJIS的数组
        var csvbuf = csv.map(function(e) {return e.join(','); }).join('\r\n');
         
        var array = str2array(csvbuf);
        var sjis_array = Encoding.convert(array, "SJIS", "UNICODE");
        var uint8_array = new Uint8Array(sjis_array);
        var blob = new Blob([uint8_array], { type: 'text/csv' });
         
        var url = (window.URL || window.webkitURL).createObjectURL(blob);

使用以上方法,可以轻松地实现文件下载的自定义。请务必自己尝试一下。

00157fdd4214498c74b38581917c1e2

该Tips在2014年4月版本中确认过。