Chrome と Firefox で正常に動作する html テーブルを csv にエクスポートしています。Windows の safari では問題なく動作します。名前は不明ですが、ファイルを開くか保存するオプションが表示されますが、これを実行してダウンロードを開くと、ファイルはそこにあります。そして正しく開きます。
ただし、Mac の Safari では、別のブラウザ ウィンドウで開こうとして失敗します。
私が検討しているオプションがいくつかあります。
- Safari MAC 用の CSV をエクスポートするための別のボタンを作成する
- ブラウザで「開く/名前を付けて保存」ダイアログボックスを開きます。
- これを行うための最良の方法に関する他の提案..?
私は周りを見回しましたが、2番目のポイントへの答えはノーだと思います-ブラウザの動作を強制することはできません。
ただし、Safari mac でエクスポートする方法や、これを行う方法に関する適切な解決策を見つけることができませんでした。
csv をエクスポートするために使用している Jquery コードは次のとおりです。
<script type="text/javascript">
$(document).ready(function () {
function exportTableToCSV($table, filename) {
var $rows = $table.find('tr:has(td)'),
// Temporary delimiter characters unlikely to be typed by keyboard
// This is to avoid accidentally splitting the actual contents
tmpColDelim = String.fromCharCode(11), // vertical tab character
tmpRowDelim = String.fromCharCode(0), // null character
// actual delimiter characters for CSV format
colDelim = '","',
rowDelim = '"\r\n"',
// Grab text from table into CSV formatted string
csv = '"' + $rows.map(function (i, row) {
var $row = $(row),
$cols = $row.find('td');
return $cols.map(function (j, col) {
var $col = $(col),
text = $col.text();
return text.replace('"', '""'); // escape double quotes
}).get().join(tmpColDelim);
}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"',
// Data URI
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
$(this)
.attr({
'download': filename,
'href': csvData,
'target': '_blank'
});
}
// This must be a hyperlink
$(".export").on('click', function (event) {
// CSV
exportTableToCSV.apply(this, [$('#tableContainer>table'), 'export.csv']);
// IF CSV, don't do event.preventDefault() or return false
// We actually need this to be a typical hyperlink
});
});
</script>
私のhtmlテーブルはajaxから作成されています。例は次のとおりです。
$.ajax({
type: "POST",
//contentType: "application/json; charset=utf-8",
url: theUrl,
data: { 'manufacturer': manufacturer, 'country': country, 'startDate': startDate, 'endDate': endDate, 'chartType': chartType },
dataType: "json",
success: function (data) {
setTimeout($.unblockUI, 50);
if (data.length == 0) {
$('#noData').show();
$('#chartContainer').hide();
$('#tableContainer').hide();
$('#exportData').hide();
}
var retailerNameArray = [];
var impressionsArray = [];
var intsArray = [];
for (var i = 0; i < data.length; i++) {
var impRow = data[i];
//only display on graph if not 0
if (impRow.RetailerImpressionCount > 0) {
//put into an array
var retailer = impRow.RetailerDescription;
var imps = impRow.RetailerImpressionCount;
retailerNameArray.push(retailer);
impressionsArray.push(imps);
var clicks = impRow.RetailerClickCount;
intsArray.push(clicks);
$('#noData').hide();
$('#chartContainer').show();
$('#tableContainer').show();
$('#exportData').show();
}
}
var table = document.getElementById("usertable");
var tabledata = "";
tabledata += "<tr class =\"tableHeader\">";
tabledata += "<td>Retailer</td>";
tabledata += "<td>Impressions</td>";
tabledata += "<td>Clicks</td>";
tabledata += "<td>CTR</td>";
tabledata += "<td>Percentage</td>";
tabledata += "</tr>";
for (var i = 0; i < data.length; i++) {
var impDataRow = data[i];
tabledata += "<tr>";
tabledata += "<td>" + impDataRow.RetailerDescription + "</td>";
tabledata += "<td>" + impDataRow.RetailerImpressionCount + "</td>";
tabledata += "<td>" + impDataRow.RetailerClickCount + "</td>";
tabledata += "<td>" + impDataRow.ClickThroughRate.toFixed(2) + "%</td>";
tabledata += "<td>" + impDataRow.Percentage.toFixed(2) + "%</td>";
tabledata += "</tr>";
}
//tabledata += "<tfoot>";
tabledata += "<tr>";
tabledata += "<td>Total</td>";
tabledata += "<td>" + impDataRow.TotalImpressionCount + "</td>";
tabledata += "<td>" + impDataRow.TotalClickCount + "</td>";
tabledata += "<td>" + impDataRow.TotalClickThroughRate.toFixed(2) + "%</td>";
tabledata += "<td>" + impDataRow.TotalPercentage.toFixed(2) + "%</td>";
tabledata += "</tr>";
// tabledata += "</tfoot>";
table.innerHTML = tabledata;
$("th");
$("tr:even");
$("tr:odd");
}
}
);
});
//]]>
編集
サファリMacで適切に機能していないのは次の行だと思います（確かではありませんが）：
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
私はこれをさらに調査していますが、これは特にサファリ用に設定する必要がありますか? - サファリには安全な MIME タイプがあることは知っていますが、csv 用の安全な MIME タイプはありますか?
編集
理想的ではありませんが、サファリ専用の新しいボタンを作成して使用しました：
csvData = 'data:text/plain,' + encodeURIComponent(csv);
これはサファリで安全なMIMEタイプとして認識されるため、新しいタブで開きます-私が探していたもののようなものです...
今、私は IE9 と戦って、すなわち aswel で動作する解決策を見つけようとしています。
ここに私がこれまでに試したことのクーペがあります：
http://blog.paxcel.net/blog/savedownload-file-using-html5-javascript-the-download-attribute-2/
しかし、私はこれを機能させることができません
と
http://www.kunalbabre.com/projects/table2CSV.php
このページのオプション 3.1 は機能しますが、php に慣れていないため、どのように機能させるかわかりません。
編集
これが答えを保持することを願っています：
http://onwebdev.blogspot.com/2011/02/jquery-creating-csv-file.html
これを見て編集してください：
HTMLテーブルをasp.net MVC2でExcelにエクスポート
それを機能させるために..
編集
上記の作品をサファリとIE 10で使用する
いつものように、ご意見をお待ちしております。