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);
使用以上方法,可以轻松地实现文件下载的自定义。请务必自己尝试一下。
该Tips在2014年4月版本中确认过。