当页面上有多个表时，我在使用table2CSV.js导出时遇到麻烦。
第一个按钮将正常工作，但任何其他按钮将导出一个空白文件。什么好主意吗?如果你需要更多的信息，请告诉我。
我想补充的是，它总是在页面上的第一个表，工作正常…
请回顾一下电话(JS):
function getCSVData(tableName){
var csv_value=$(tableName).table2CSV({delivery:'value'});
$("#csv_text").val(csv_value);
}
和HTML表单按钮调用JS(页面上有几个):
<form action="getCSV.php" method ="post" >
<input type="hidden" name="csv_text" id="csv_text">
<input type="hidden" name="fileName" id="fileName" value="<?php echo($fileName); ?>">
<input type="submit" value="Download Table 0" onclick="getCSVData('table#detail0')">
</form>
<form action="getCSV.php" method ="post" >
<input type="hidden" name="csv_text" id="csv_text">
<input type="hidden" name="fileName" id="fileName" value="<?php echo($fileName); ?>">
<input type="submit" value="Download Table 1" onclick="getCSVData('table#detail1')">
</form>
<form action="getCSV.php" method ="post" >
<input type="hidden" name="csv_text" id="csv_text">
<input type="hidden" name="fileName" id="fileName" value="<?php echo($fileName); ?>">
<input type="submit" value="Download Table 2" onclick="getCSVData('table#detail2')">
</form>
下面是一些可供参考的表打开标签:
作为参考，这里是getCSV.php文件<?php
$file = $_REQUEST['fileName'];
$filename = $file."_".date("Y-m-d_H-i",time());
header("Content-type: application/vnd.ms-excel");
header("Content-disposition: csv" . date("Y-m-d") . ".csv");
header( "Content-disposition: filename=".$filename.".csv");
$csv_output=stripcslashes($_REQUEST['csv_text']);
print $csv_output;
exit;
?>
作为参考，这里是table2CSV.js代码:
jQuery.fn.table2CSV = function(options) {
var options = jQuery.extend({
separator: ',',
header: [],
delivery: 'popup' // popup, value
},
options);
var csvData = [];
var headerArr = [];
var el = this;
//header
var numCols = options.header.length;
var tmpRow = []; // construct header avalible array
if (numCols > 0) {
for (var i = 0; i < numCols; i++) {
tmpRow[tmpRow.length] = formatData(options.header[i]);
}
} else {
$(el).filter(':visible').find('th').each(function() {
if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
});
}
row2CSV(tmpRow);
// actual data
$(el).find('tr').each(function() {
var tmpRow = [];
$(this).filter(':visible').find('td').each(function() {
if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
});
row2CSV(tmpRow);
});
if (options.delivery == 'popup') {
var mydata = csvData.join(''n');
return popup(mydata);
} else {
var mydata = csvData.join(''n');
return mydata;
}
function row2CSV(tmpRow) {
var tmp = tmpRow.join('') // to remove any blank rows
// alert(tmp);
if (tmpRow.length > 0 && tmp != '') {
var mystr = tmpRow.join(options.separator);
csvData[csvData.length] = mystr;
}
}
function formatData(input) {
// replace " with “
var regexp = new RegExp(/["]/g);
var output = input.replace(regexp, "“");
//HTML
var regexp = new RegExp(/'<[^'<]+'>/g);
var output = output.replace(regexp, "");
if (output == "") return '';
return '"' + output + '"';
}
function popup(data) {
var generator = window.open('', 'csv', 'height=400,width=600');
generator.document.write('<html><head><title>CSV</title>');
generator.document.write('</head><body >');
generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
generator.document.write(data);
generator.document.write('</textArea>');
generator.document.write('</body></html>');
generator.document.close();
return true;
}
};
对于第二个和第三个表不起作用，因为您在表单中为所有3个输入(隐藏)提供了相同的id。
<input type="hidden" name="csv_text" id="csv_text">
ID应该是UNIQUE
如果你有多个具有相同ID的HTMLElement，在Javascript中检索它时，它将从开始检索第一个找到的。所以它总是从第一个表单中检索。
将每个表单的输入更改为:
<input type="hidden" name="csv_text" id="csv_text_1" />
<input type="hidden" name="csv_text" id="csv_text_2" />
<input type="hidden" name="csv_text" id="csv_text_3" />
然后修改你的函数:
function getCSVData(tableName, num){
var csv_value=$(tableName).table2CSV({delivery:'value'});
$("#csv_text_" + num).val(csv_value);
}
最后更新你的呼叫:
<input type="submit" value="Download Table 0" onclick="getCSVData('table#detail0', '0')">
<input type="submit" value="Download Table 0" onclick="getCSVData('table#detail1', '1')">
<input type="submit" value="Download Table 0" onclick="getCSVData('table#detail2', '2')">
个人观点:发送表的所有内容似乎有点无用，只是为了添加一个文件附件头，这要感谢PHP服务器。您正在使用网络发送数据，该数据将被重新发送给您，而不做任何修改(仅添加头)。
如果我必须做这样一个过程，我将只发送一个简单的GET请求到一个特定的PHP脚本，它将向我发送正确的头，然后，生成CSV内容，从数据库检索数据。