使用php+javascript来实现html table数据表的导出
数据列表导出的功能很常见，有些是简单的复制粘贴，或者复杂的饼状条形图形，一般都是基于服务器端的操作。我这里是一个简单的html table数据导出功能，目前只些了个简单的模型，主要使用javascript和简单的php来实现。
注：在ie浏览器中其实是可以使用 document.execCommand() 来实现php的操作，为了兼容各种浏览器所以我直接是使用php来实现文件下载。
要实现的功能：如图将其导出到本地文件。
javascript代码
//下载指定区域为指定文件
function saveTableElementToFile(id, fileType, fileName) {
if(typeof fileName == undefined || fileName == "") fileName = "nonamed";
if(typeof fileType == undefined || fileType == "") fileType = "csv";
var result = "";
if(fileType == "html") {
var html = document.getElementById(id).innerHTML;
html = html.replace(/table/gi, "table border='1' ");
result = html;
//document.write(html);
} else if(fileType == "csv") {
//使用jquery
var vhtml = "";
$("#"+id).find("table").each(function() {
$(this).find("tr").each(function() {
$(this).find("th").each(function() {
vhtml+= $.trim($(this).html())+",";
});
$(this).find("td").each(function() {
vhtml+= $.trim($(this).html())+",";
});
vhtml+= "\n";
});
});
vhtml = vhtml.replace(/,\n/g, "\n");
result = vhtml;
//document.write(vhtml);
}
var formHtml = "";
formHtml+= "<form name='saving_form' target='_blank' action='file_download.php' method='post'>";
formHtml+= "<input type='hidden' name='content' value='' />";
formHtml+= "<input type='hidden' name='file_type' value='' />";
formHtml+= "<input type='hidden' name='file_name' value='' />";
formHtml+= "</form>";
$("form[name=saving_form]").remove();
$("body").append(formHtml);
document.forms['saving_form'].elements['content'].value = result;
document.forms['saving_form'].elements['file_type'].value = fileType;
document.forms['saving_form'].elements['file_name'].value = fileName;
document.forms['saving_form'].submit();
//history.go(-1);
}
function saveTableElementToFile(id, fileType, fileName) {
if(typeof fileName == undefined || fileName == "") fileName = "nonamed";
if(typeof fileType == undefined || fileType == "") fileType = "csv";
var result = "";
if(fileType == "html") {
var html = document.getElementById(id).innerHTML;
html = html.replace(/table/gi, "table border='1' ");
result = html;
//document.write(html);
} else if(fileType == "csv") {
//使用jquery
var vhtml = "";
$("#"+id).find("table").each(function() {
$(this).find("tr").each(function() {
$(this).find("th").each(function() {
vhtml+= $.trim($(this).html())+",";
});
$(this).find("td").each(function() {
vhtml+= $.trim($(this).html())+",";
});
vhtml+= "\n";
});
});
vhtml = vhtml.replace(/,\n/g, "\n");
result = vhtml;
//document.write(vhtml);
}
var formHtml = "";
formHtml+= "<form name='saving_form' target='_blank' action='file_download.php' method='post'>";
formHtml+= "<input type='hidden' name='content' value='' />";
formHtml+= "<input type='hidden' name='file_type' value='' />";
formHtml+= "<input type='hidden' name='file_name' value='' />";
formHtml+= "</form>";
$("form[name=saving_form]").remove();
$("body").append(formHtml);
document.forms['saving_form'].elements['content'].value = result;
document.forms['saving_form'].elements['file_type'].value = fileType;
document.forms['saving_form'].elements['file_name'].value = fileName;
document.forms['saving_form'].submit();
//history.go(-1);
}
PHP代码
header('Content-type:application/download');
header("Content-Disposition: attachment; filename=".$_POST['file_name'].".".$_POST['file_type']);
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
echo iconv("utf-8", "gb2312", $_POST['content']);
header("Content-Disposition: attachment; filename=".$_POST['file_name'].".".$_POST['file_type']);
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
echo iconv("utf-8", "gb2312", $_POST['content']);
详细例子可以查看 http://www.greatmoo.com/untest/samples/table2file.html
meiking
2009-06-09 16:35:09
评论:0
阅读:147
引用:0