CSV를 JavaScript로 조금 유연하게 출력하고 싶다! ! !

라고 생각하는 일이 있지요.

오늘은 JavaScript를 출력하는 기능을 만들어 봅시다.
조금 길고 무거워요 💦

앱 준비

kintone 앱 스토어에서 고객 목록을 '샘플 데이터 포함'을 선택하여 만듭니다.

자바스크립트

JavaScript 전체 코드는 여기
kintone 레코드 목록 CSV 파일 다운로드 스크립트

버튼 붙이기

이 기사를 참고로 버튼을 설치합니다.
【kintone】앱의 「스페이스」필드에 버튼을 설치한다

버튼의 기능 내용은 ↓과 같이 해 주세요.

//ボタンをクリックしたときの動作
btn.onclick=()=>{
    //CSVダウンロード
    dlCsv();
}

encoding.js

Cybozu CDN
↓여기를 「JavaScript/CSS로 커스터마이즈」의 설정에 추가해 둡니다.
htps : // js. cy 흐림. 코 m / 엔코 ぢ gjs / 1.0.30 / 엔코 ぢ g. 모두. js

CSV를 출력하는 기능 쓰기

↓ 이쪽을 참고로 kintone의 레코드를 CSV 파일에 기입하는 코드로 해 보았습니다.
해설은 나중에 설명합니다.

참고:
파일을 다운로드 저장하는 방법
브라우저에서 js의 배열을 csv로 다운로드합니다.
javascript로 문자 코드 변환

// 1.CSVファイル生成用
const HEADER =['会社名','部署名','担当者名','郵便番号','TEL'];//CSVに出力したいフィールドのフィールドコード

// CSVをダウンロード
const dlCsv = async ()=>{
    //フィールド名からCSVの文字列データを作る
    const setHeaderData = () => {
        let headerData = '';
        HEADER.forEach(h => {
            headerData += h + ',';
        });
        headerData += '\r\n';
        return headerData;
    };  

    //レコードからCSVの文字列データを作る
    const recordToCsvData = records => {
        let rowData = '';
        records.forEach(r => {
            HEADER.forEach(h => {
                rowData += r[h].value + ',';
            });
            rowData += '\r\n';
        });
        return rowData;
    }; 

    //URLエンコード
    const createDataUriFromString = str => {
        // 文字列を配列に変換
        const array = str.split('').map(s => s.charCodeAt());
        // エンコード
        const sjis_array = Encoding.convert(array, 'SJIS', 'UNICODE');
        const uInt8List = new Uint8Array(sjis_array);
        return uInt8List;
    };  

    //2. CSVにしたいレコードを取得する
    const param_get = {
        app:kintone.app.getId(),
        //query:'出力フラグ != 1', // 絞り込みたいときはクエリを書く"出力フラグ = 0" など
    };
    const obj_get = await kintone.api('/k/v1/records','GET',param_get);
    const targetRecords =obj_get.records;

    //3. レコード1件以上だったらCSV出力
    if (targetRecords.length > 0) {

        //4. CSVにするテキストデータを作成
        const str = createDataUriFromString( setHeaderData() + recordToCsvData(targetRecords));

        //5. CSVファイル作成
        const blob = new Blob([str], {type:"text\/csv"});
        const url = URL.createObjectURL(blob);

        //6. ダウンロード処理
        const a = document.createElement("a");
        document.body.appendChild(a);
        a.download = "test.csv";//ここすきなファイル名に
        a.href = url;
        a.click();
        a.remove();
        URL.revokeObjectURL(url);

        // // 出力フラグをONにするようなコードはこのへんに
        // let param_records = [～,～, ～,～];
        // const param_upd = {
        //     app:kintone.app.getId(),
        //     records:param_records,
        // };
        // const obj_put = await kintone.api('/k/v1/records','PUT',param_upd);
    }
}

CSV 다운로드 흐름

거꾸로 해설입니다만, 흐름으로서는 이 순서로 실행합니다.

설정 상수

CSV로 만들 레코드를 얻습니다

레코드 1건 이상이면 CSV 출력하는 IF문(레코드가 없으면 종료)

CSV로 만들 텍스트 데이터 만들기

CSV 파일 만들기

다운로드 처리

하나씩 봅니다.

1. 설정 상수

HEADER에 출력하고 싶은 필드의 필드 코드를 배열로 써 둡니다.

// CSVファイル生成用
const HEADER =['会社名','部署名','担当者名','郵便番号','TEL'];//CSVに出力したいフィールドのフィールドコード

2. CSV로 만들 레코드를 얻습니다.

출력하고 싶은 CSV의 근원이 되는 레코드를 취하러 갑니다.
여기서 앱에 '출력 플래그' 등을 준비해 두면 query에 미출력 레코드를 지정할 수 있습니다.
예를 들면 query:'出力フラグ != 1',targetRecords = obj_get.records; 부분에 레코드 배열이 할당됩니다.

참고 : 레코드 일괄 획득(쿼리에서 조건 지정)

    //CSVにしたいレコードを取得する(1)
    const param_get = {
        app:kintone.app.getId(),
        //query:'出力フラグ != 1', // 絞り込みたいときはクエリを書く
    };
    const obj_get = await kintone.api('/k/v1/records','GET',param_get);
    const targetRecords = obj_get.records;

3. 레코드 1건 이상이면 CSV 출력

2.에서 취득한 레코드가 1건 이상이면 출력합시다

    //レコード1件以上だったらCSV出力(2)
    if (targetRecords.length > 0) {　～～

4. CSV로 만들 텍스트 데이터 만들기

위쪽에서 많이 정의하고 있는 CSV 작성을 위한 함수를 사용하고 있습니다.
함수들은 이쪽을 참고로 쓰고 있습니다.
참고:
브라우저에서 js의 배열을 csv로 다운로드합니다.
javascript로 문자 코드 변환

    //CSVにするテキストデータを作成
    const str = createDataUriFromString( setHeaderData() + recordToCsvData(targetRecords));

5. CSV 파일 생성

4. 에서 만든 str을 CSV ``파일''로 만듭니다.
5.6.은 ↓의 사이트를 참고로 하고 있습니다.
참고 : 파일을 다운로드 저장하는 방법

    //CSVファイル作成(4)
    const blob = new Blob([str], {type:"text\/csv"});
    const url = URL.createObjectURL(blob);

6. 파일 다운로드 처리

다운로드할 때는 a 태그를 숨기고 클릭하여 삭제한다는 흐름이군요. 공부가 되었습니다.

    //ダウンロード処理(5)
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.download = "test.csv";//ここすきなファイル名に
    a.href = url;
    a.click();
    a.remove();
    URL.revokeObjectURL(url);

요약

이번에는 어쨌든 다운로드 해 본다. 라는 구조를 소개했습니다.
궁리를 더하면, 「CSV 파일을 다운로드하면 플래그를 세운다」라고 하는 구조도 만들 수 있습니다.
코멘트 아웃 부분도 참고로 되면 좋을지도 모릅니다! ?

꼭 도전해보세요 ^ 0 ^

이상입니다.