# 「集計したデータをCSVでダウンロードするには？」の単一レコード出力におけるIE対応について

**URL:** <https://community.cybozu.dev/t/topic/2593>\
**Category:** kintone 開発相談\
**Created:** [2016 年 8 月 29 日午前 2:12 UTC](https://community.cybozu.dev/t/topic/2593 "2016-08-29T02:12:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2162](https://avatars.discourse-cdn.com/v4/letter/l/e56c9b/32.png) [@Legacy\_Account2162](https://community.cybozu.dev/u/Legacy_Account2162)\
**Post date:** [2016 年 8 月 29 日午前 2:12 UTC](https://community.cybozu.dev/t/topic/2593/1 "2016-08-29T02:12:09Z")

</div>

お世話になります。藤原と申します。

Tipsの「[集計したデータをCSVでダウンロードするには？](https://cybozudev.zendesk.com/hc/ja/articles/201941054-%E9%9B%86%E8%A8%88%E3%81%97%E3%81%9F%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92CSV%E3%81%A7%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF-)」を参考に  
レコード詳細画面から単一レコードのCSV出力機能を実装しました。

ChromeやFirefoxは問題なかったのですが、IEだとリンクをクリックした時に  
「データの読み込みに失敗しました。」と、表示されてしまいます。  
（※IEのバージョンは11です）

ただ、そのエラーを無視してダウンロードは正しく行えます。  
2回目以降リンクをクリックした場合はこのエラーが表示されません。  
最初にエラーが表示されてしまう原因は何なのでしょうか。

下記の「★」の部分がTipsのコードを変更した点です。

(function () {  
“use strict”;

// 一覧ビューの表示イベント→レコード詳細の表示イベントに変更  
kintone.events.on(‘app.record.detail.show’, function(event) {  
var $link = $(‘#download-csv’);  
if ($link.length == 0) {  
// ★リンクの置き場所を一覧画面のメニュースペース→詳細画面のフォーム内スペースに変更  
var $space = $(kintone.app.record.getSpaceElement(‘csv\_out’));  
$link = $(‘\<a id=“download-csv” href=“#”\>CSVでダウンロード\</a\>’);  
$space.append($link);  
}

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

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

// CSVデータを作成  
var csv = [];  
var row = ['レコード番号','タイトル','内容'];  
csv.push(row);

// ★一行のみ出力するように変更  
var record = event.record;  
row = [];  
row.push(escapeStr(record['レコード番号'].value));  
row.push(escapeStr(record['タイトル'].value));  
row.push(escapeStr(record['内容'].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);  
}  

```

});  
})();

恐れいりますが、ご教示いただけますと大変ありがたいです。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account513](https://avatars.discourse-cdn.com/v4/letter/l/8dc957/32.png) [@Legacy\_Account513](https://community.cybozu.dev/u/Legacy_Account513)\
**Post date:** [2016 年 8 月 29 日午前 8:50 UTC](https://community.cybozu.dev/t/topic/2593/2 "2016-08-29T08:50:28Z")

</div>

藤原さん

サイボウズスタートアップス武井です。

&nbsp;

結論から申し上げると、

10行目を以下にすることでエラーが出なくなりました。

```
$link = $('<a id="download-csv" href="'+location.hash+'">CSVでダウンロード</a>');

```

&nbsp;

IEはedgeしか環境がありませんので、そちらでの確認になりますが、

どうもこのソースが云々ではなく、IEのaタグにおけるhref="#"の挙動自体が特殊なようです。

&nbsp;

そして、その特殊挙動の結果、IEだと/show#というURLにアクセスしてしまいます。

このURLにアクセスすると、kintone上当該エラーが出るような仕組みになっているようです。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2162](https://avatars.discourse-cdn.com/v4/letter/l/e56c9b/32.png) [@Legacy\_Account2162](https://community.cybozu.dev/u/Legacy_Account2162)\
**Post date:** [2016 年 8 月 29 日午前 9:19 UTC](https://community.cybozu.dev/t/topic/2593/3 "2016-08-29T09:19:47Z")

</div>

サイボウズスタートアップス 武井様

ご回答ありがとうございます。  
ご指摘いただいた点を修正いたしましたところ、  
IE11でもエラーが出なくなりました。

また、IEのaタグの挙動について、とても参考になりました。  
見てみると確かに他のブラウザとURLが異なっておりました。  
今後はこういった点にも注意して検証を行いたいと思います。

解消でき大変助かりました。  
ありがとうございました。