サブテーブルの内容をCSVでダウンロードしたい

[Legacy_Account1585 (オオニシノリトモ（Legacy Account）)]

レコード一覧をCSVでタウンロードする方法は多く紹介されているのですが、

レコード内にリンクを作成し、サブテーブル内容をCSV保管する方法で参考になるものがあまりなく困っております。

 

いろいろものを参考にし、継ぎ接ぎしてみたのですが、リンクの表示、

CSVへの値の代入まではデバッガで確認が出来ました。

ただ、CSVのダウンロードが出来ずに困っております。(ダウンロードウィンドウが出ません。)

なにかヒントを頂けないでしょうか。

↓レコードではなく、レコード内のサブテーブルの内容をエクスポートしたいです。

 

jQuery.noConflict();
(function($) {
"use strict";

// 一覧ビューの表示イベント
kintone.events.on('app.record.detail.show', function(event) {
// メニュ右側の空白部分にボタンを設置

var $link = $('#download-csv');
$link = $('<a id="download-csv" href="#">CSVでダウンロード</a>');

var elem = document.createElement("a");
elem.href = "#";
elem.id = "download-csv";
var str = document.createTextNode("CSVでダウンロード");
elem.appendChild(str);

kintone.app.record.getHeaderMenuSpaceElement().appendChild(elem);

// エスケープ
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','column3','column4'];
csv.push(row);

var tableRecords = event.record['商談履歴'].value;
for (var j = 0; j < tableRecords.length; j++) {
row = [];
row.push(escapeStr(tableRecords[j].value['対応状況'].value));
row.push(escapeStr(tableRecords[j].value['課題'].value));
row.push(escapeStr(tableRecords[j].value['対象'].value));
row.push(escapeStr(tableRecords[j].value['現状'].value));
row.push(escapeStr(tableRecords[j].value['ToDo'].value));
csv.push(row);
}

// BOM付でダウンロード
var csvbuf = csv.map(function(e){return e.join(',')}).join('\r');

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);

 

[Legacy_Account1557 (カキ氷（Legacy Account）)]

大西 範知さん

こんにちは。

以下のページの (おまけ)ダウンロードしたファイルをローカルに保存する の項目が参考になるかと思います。

作成したCSVをリンクに貼り付けてそのリンクをクリックするというものです。

https://cybozudev.zendesk.com/hc/ja/articles/200814380

[Legacy_Account1585 (オオニシノリトモ（Legacy Account）)]

ご回答ありがとうございます。

すこし変更してみましたが、やはりリンクやダウンロードウィンドウが出ずでした。

csvbuf、blobUrlには値がセットされているのですが、フィールドにリンクを表示する際には

特殊な方法を取らなければならないのでしょうか・・・。

 

jQuery.noConflict();
(function($) {
"use strict";

// 一覧ビューの表示イベント
kintone.events.on('app.record.detail.show', function(event) {

// エスケープ
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','column3','column4'];
csv.push(row);

var tableRecords = event.record['商談履歴'].value;
for (var j = 0; j < tableRecords.length; j++) {
row = [];
row.push(escapeStr(tableRecords[j].value['対応状況'].value));
row.push(escapeStr(tableRecords[j].value['課題'].value));
row.push(escapeStr(tableRecords[j].value['対象'].value));
row.push(escapeStr(tableRecords[j].value['現状'].value));
row.push(escapeStr(tableRecords[j].value['ToDo'].value));
csv.push(row);
}

// BOM付でダウンロード
var csvbuf = csv.map(function(e){return e.join(',')}).join('\r');
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var blob = new Blob([bom, csvbuf], { type: 'text/csv' });
var url = window.URL || window.webkitURL;

//BlobURLの取得
var blobUrl = url.createObjectURL(blob);

//リンクを作成し、そこにBlobオブジェクトを設定する
var alink = document.createElement("a");
var linkFileName = "ダウンロードファイル.txt";
alink.innerHTML = 'ダウンロード';

//マウスイベントを設定
var e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

//aタグのクリックイベントをDispatch起動
alink.dispatchEvent(e);

});
})(jQuery);

[Legacy_Account1557 (カキ氷（Legacy Account）)]

大西 範知さん

こちらでいかがでしょうか？

 

jQuery.noConflict();
(function($) {
 "use strict";

 // 一覧ビューの表示イベント
 kintone.events.on('app.record.detail.show', function(event) {

  // エスケープ
  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', 'column3', 'column4'];
  csv.push(row);

  var tableRecords = event.record['商談履歴'].value;
  for (var j = 0; j < tableRecords.length; j++) {
   row = [];
   row.push(escapeStr(tableRecords[j].value['対応状況'].value));
   row.push(escapeStr(tableRecords[j].value['課題'].value));
   row.push(escapeStr(tableRecords[j].value['対象'].value));
   row.push(escapeStr(tableRecords[j].value['現状'].value));
   row.push(escapeStr(tableRecords[j].value['ToDo'].value));
   csv.push(row);
  }

  // BOM付でダウンロード
  var csvbuf = csv.map(function(e) {
   return e.join(',')
  }).join('\r');
  var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
  var blob = new Blob([bom, csvbuf], {
   type: 'text/csv'
  });
  var url = window.URL || window.webkitURL;

  //BlobURLの取得
  var blobUrl = url.createObjectURL(blob);

  //リンクを作成し、そこにBlobオブジェクトを設定する
  var alink = document.createElement("a");
  var linkFileName = "ダウンロードファイル.txt";
  alink.href = blobUrl;
  alink.innerHTML = 'ダウンロード';
  
  //マウスイベントを設定
  var e = document.createEvent("MouseEvents");
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  
  //aタグのクリックイベントをDispatch起動
  alink.dispatchEvent(e);

 });
})(jQuery);

[Legacy_Account1585 (オオニシノリトモ（Legacy Account）)]

ありがとうございます。

 

ただ頂いた方法ですと、どうしてもリンクが表示されず。

以下の方法であればリンクが表示されました。

kintone.app.record.getHeaderMenuSpaceElement().innerHTML = '<a id="download-csv" href="#" download="download.csv">CSVでダウンロード</a>';

 

リンクは表示されてコンテンツも落ちてくるのですが、

CSVデータではなく、表示されているページのHTMLがダウンロードされるので、

blobのデータがうまくダウンロードに対して渡っていないのでは、と調べています。

 

[Legacy_Account1557 (カキ氷（Legacy Account）)]

大西 範知さん

 

おっしゃるように、サンプル自体はリンクを表示させないで自動でファイルをDLする仕組みとなっていました。

リンクを表示させる場合はBlobを以下のようにaタグに設定してみてください。

  // BOM付でダウンロード
  var csvbuf = csv.map(function(e) {
   return e.join(',')
  }).join('\r');
  var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
  var blob = new Blob([bom, csvbuf], {
   type: 'text/csv'
  });
  var url = window.URL || window.webkitURL;

   //BlobURLの取得
  var blobUrl = url.createObjectURL(blob);

   //リンクを作成し、そこにBlobオブジェクトを設定する
  var alink = document.createElement("a");
  var linkFileName = "ダウンロードファイル.txt";
  alink.href = blobUrl;
  alink.id = 'download-csv';
  alink.download = 'download.csv';
  alink.textContent = 'CSVでダウンロード';
// メニュースペースにリンクを表示
  kintone.app.record.getHeaderMenuSpaceElement().appendChild(alink);

[Legacy_Account1585 (オオニシノリトモ（Legacy Account）)]

ありがとうございます。

やっと意図する仕組みが完成しました。

少し見直し、フォームで「csv_download」というスペースを作成しておき、

そこに「CSVをダウンロード」というリンクを表示するようにしてみました。

 

jQuery.noConflict();
(function($) {
"use strict";

// 一覧ビューの表示イベント
kintone.events.on('app.record.detail.show', function(event) {

// エスケープ
var escapeStr = function(value) {
return '"' + (value? value.replace(/"/g, '""'): '') + '"';
};

if ((window.URL || window.webkitURL).createObjectURL === null) {
// サポートされていないブラウザ
return;
}

// CSVデータを作成
var csv = [];
var row = ['対応状況','課題','対象システム','現状','ToDo'];
csv.push(row);

var tableRecords = event.record['商談履歴'].value;
for (var j = 0; j < tableRecords.length; j++) {
row = [];
row.push(escapeStr(tableRecords[j].value['対応状況'].value));
row.push(escapeStr(tableRecords[j].value['課題'].value));
row.push(escapeStr(tableRecords[j].value['対象'].value));
row.push(escapeStr(tableRecords[j].value['現状'].value));
row.push(escapeStr(tableRecords[j].value['ToDo'].value));
csv.push(row);
}

  // BOM付でダウンロード
  var csvbuf = csv.map(function(e) {
   return e.join(',')
  }).join('\r');
  var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
  var blob = new Blob([bom, csvbuf], {
   type: 'text/csv'
  });
  var url = window.URL || window.webkitURL;

   //BlobURLの取得
  var blobUrl = url.createObjectURL(blob);

   //リンクを作成し、そこにBlobオブジェクトを設定する
  var alink = document.createElement("a");
  var linkFileName = "ダウンロードファイル.txt";
  alink.href = blobUrl;
  alink.id = 'download-csv';
  alink.download = 'download.csv';
  alink.textContent = 'CSVでダウンロード';
kintone.app.record.getSpaceElement('csv_download').appendChild(alink);
});
})(jQuery);