开发者中心包含此范例模板（用CSV导出关联记录列表数据），请前往开发者中心下载学习。

概要

今天就应广大群众的要求介绍如何通过CSV输出关联记录列表♪

在kintone应用的标准功能中，有个叫关联记录列表的功能，可以引用其他应用的记录。只要以某个字段为key进行关联，就可以将关联的记录显示到当前记录详情页面中。但是，关联记录列表只是显示关联的数据，并不是把那些数据保存在自己的应用里。

另外，kintone中还有一个可以将数据通过CSV格式导出的功能。通过CSV文件导出时，因为自己没有保存关联记录列表的数据，所以关联记录列表无法通过CSV导出。

在此，推出了这篇介绍如何通过CSV导出包含关联记录列表的Tips。

完成图

准备应用

本次准备两个应用，一个是“项目管理”，一个是“客户列表”。※“客户列表”应用的关联记录列表要引用“项目管理”应用里的记录，因此请先准备好“项目管理”应用。

项目管理

▼如果字段代码不一样，JavaScript无法正常运行，因此需要注意更改。项目管理应用的字段设置如下。※下面的字段必须，其他任意。

▼应用参考图

客户列表

▼在顾客列表应用中添加“关联记录列表”

▼关联记录列表的设置详情 

▼如果字段代码不一样，JavaScript无法正常运行，因此需要注意更改。客户列表应用的字段设置如下。※下面的字段必须，其他任意。

▼应用参考图

JavaScript

(function() {
    'use strict';
    var CSVButtonEl;
    kintone.events.on('app.record.index.show', function (event) {
        //定义变量
        var records = event.records;
        var company, division, assignee, tel, mail = "";
        var product, subtotal = "";
        //function request中使用的变量
        var resp = [];
        var query = "";
        var app_id = kintone.app.getRelatedRecordsTargetAppId('reference');
        //csv的数组
        var csv = [];
        //检查是否已经存在按钮
        if (!CSVButtonEl) {
            setBtn();
            CSVButtonEl.addEventListener('click', toClick);
        }
        //创建按钮元素
        function setBtn() {
            var spaceEl = kintone.app.getHeaderMenuSpaceElement();
            var text = document.createTextNode('输出CSV文件');
            CSVButtonEl = document.createElement('button');
            CSVButtonEl.appendChild(text);
            spaceEl.appendChild(CSVButtonEl);
        }
        //点击时的处理
        function toClick() {
            getMakeCsv();
            downloadFile(csv);
        }
        //创建csv文件
        function getMakeCsv() {
            //获取当前记录信息
            csv += ['公司名称', '部门', '负责人', '电话号码', '邮件地址', '产品名', '合计', '\n'];//手动创建第一行的项目名称
            for (var i = 0; i < records.length; i++) {
                company = records[i]['company']['value'];
                division = records[i]['division']['value'];
                assignee = records[i]['assignee']['value'];
                tel = records[i]['TEL']['value'];
                mail = records[i]['Mail']['value'];
                query = 'company = \"' + company + '\"';//以公司名称为key获取相应的关联记录
                //获取同一个公司的相关记录
                resp[i] = request(app_id, query);
                if (resp[i].records.length !== 0) {
                    for (var j = 0; j < resp[i].records.length; j++) {
                        product = resp[i].records[j]['product']['value'];
                        subtotal = resp[i].records[j]['subtotal']['value'];
                        csv += company + ',' + division + ',' + assignee + ',' + tel + ',' + mail + ',' + product + ',' + subtotal + '\n';
                    }
                } else {
                    csv += company + ',' + division + ',' + assignee + ',' + tel + ',' + mail + '\n';
                }
            }
        }
        //获取管理记录的xmlHttp请求
        function request(app_id, query) {
            var appUrl = kintone.api.url('/k/v1/records') + '?app=' + app_id + '&query=' + query;
            //xmlHttp请求
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open('GET', appUrl, false);
            xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xmlHttp.send(null);
            //获取的记录保存到Array
            var respdata = JSON.parse(xmlHttp.responseText);
            //返回值
            return respdata;
        }
        //下载函数
        function downloadFile(csv) {
        //ファイル名
            var filename = 'client_case' + getTimeStamp() + '.csv';
            //Blob准备
            var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
            var blob = new Blob([bom, csv], {type: 'text/csv'});
            if (window.navigator.msSaveBlob) {
                window.navigator.msSaveBlob(blob, filename);
            } else {
                var url = (window.URL || window.webkitURL);
                var blobUrl = url.createObjectURL(blob);
                var e = document.createEvent('MouseEvents');
                e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
                a.href = blobUrl;
                a.download = filename;
                a.dispatchEvent(e);
            }
        }
        //获取日期作为文件名的一部分
        function getTimeStamp() {
            var d = new Date();
            var YYYY = d.getFullYear();
            var MM = (d.getMonth() + 1);
            var DD = d.getDate();
            var hh = d.getHours();
            var mm = d.getMinutes();
            if (MM < 10) { MM = '0' + MM; }
            if (DD < 10) { DD = '0' + DD; }
            if (hh < 10) { hh = '0' + hh; }
            else if (mm < 10) { mm = '0' + mm; }
            String();
            return '' + YYYY + MM + DD + hh + mm;
        }
    });
})();

【注意点】

• 可以通过URL指定JS文件，也可以保存到本地后上传到“客户列表”应用中。

代码说明

这次的大致流程是获取记录的详细信息，手动做成CSV文件，再把获取到的信息保存到CSV文件。下面就简单介绍一下。

【获取记录信息＆元素】

• 使用kintone.app.getRelatedRecordsTargetAppId('字段代码')获取关联记录的应用ID [第15行] 

• 使用kintone.app.getHeaderMenuSpaceElement() 获取获取记录列表菜单的右边空白部分的元素，用于保存按钮 [第28行]

• for (var i = 0; i < records.length; i++){.......} 各变量中保存字段的值 [第45行]

• query = 'company = \"' + company + '\"';　搜索条件中作为Key的公司名称保存到变量中 [第51行] (批量获取记录（在查询中指定条件）)

【按钮的生成＆处理】

• 使用if (!CSVButtonEl)判断只有当按钮不存在时才生成按钮，以防止重复生成bug [第22行]

• function toClick() {...}　按下按钮时执行处理 [第23行]

【创建CSV文件】

• csv += ['公司名称', '部门', '负责人', '电话号码', '邮件地址', '产品名称', '合计', '\n'];　需要手动创建CSV文件第一行的各项目名称。是逗号格式，请用逗号将各项目隔开，最后用\n换行 [第44行]

• 使用for语句循环获取同一公司名称的记录，追加到CSV文件的各行 [第54行~]

                if (resp[i].records.length !== 0) {
                    for (var j = 0; j < resp[i].records.length; j++) {
                        product = resp[i].records[j]['product']['value'];
                        subtotal = resp[i].records[j]['subtotal']['value'];
                        csv += company + ',' + division + ',' + assignee + ',' + tel + ',' + mail + ',' + product + ',' + subtotal + '\n';
                    }
                } else {
                    csv += company + ',' + division + ',' + assignee + ',' + tel + ',' + mail + '\n';
                }
            }

【将当前日期放到文件名中】

• 使用Date对象获取当前日期与时间[第108行]

• getMonth()因为获取的是上个月的，所以记得+1 [第110行]

• 月和日期的位数如果是1位，在前面补0，使之保持2位 [第114行~]

• 最后，以YYYY + MM + DD + hh + mm的格式返回 [第119行]

【下载数据】

• 详情请参考此Tips【如何将汇总后的数据下载到CSV文件？】。

完成图

▼应用的参考图

▼下载下来的CSV文件的样子

最后

感觉如何?

这样，关联记录的数据是不是也可以通过CSV输出啦(^0^)/

另外，灵活使用上面的技巧，不单单是关联记录列表，还可以通过CSV自由导出其他应用的数据哦。

请务必尝试一下吧♪

此Tips于2014年12月的版本中进行过确认。