我正在将我的 html 表导出到 csv,这在 Chrome 和 Firefox 中运行良好,在 Windows 上的 safari 中运行正常 - 您可以选择打开或保存文件,尽管名称为 Unknown,但如果您这样做并打开下载文件就在那里并正确打开。
但是,在 Mac 上的 Safari 上,它会尝试在另一个浏览器窗口中打开它并失败。
我正在研究几个选项:
- 为 Safari MAc 创建一个单独的按钮以导出 CSV
- 使浏览器打开一个“打开/另存为”对话框。
- 有关执行此操作的最佳方法的其他建议..?
我环顾四周,我认为第二点的答案是否定的——你不能强迫浏览器的行为。
但是,我还没有找到在 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");
}
}
);
});
//]]>
编辑
我认为(尽管不确定)是这条线在 safari mac 中无法正常工作:
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
我正在对此进行进一步调查,但是否应该将其设置为特别适用于 safari 的内容?- 我知道 safari 有安全的 mime 类型,但他们有 csv 的安全 mime 类型吗?
编辑
虽然不理想,但我为 safari 创建了一个新按钮并使用:
csvData = 'data:text/plain,' + encodeURIComponent(csv);
因为这在 safari 中被认为是一种安全的 mime 类型,所以它会在一个新选项卡中打开它——这就是我想要的……
现在,我正在与 IE9 进行斗争,试图找到一种适用于 ie 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
现在编辑 看这个:
试图让它工作..
编辑
在 safari 和 IE 10 中使用上述作品
一如既往,非常感谢任何输入!