正在做一个小项目, 从数据库中查询数据放在 HTML Table 中. 现在想要从这个 table 中导出数据来. 另外用户需要选择导出的列. 使用 JQuery 的导出插件可以完成这个需求.
例子:
导入插件:
html:
Export XLS 插件还有以下这些参数选项:
separator:','ignoreColumn:[2,3],tableName:'yourTableName'type:'csv'pdfFontSize:14pdfLeftMargin:20escape:'true'htmlContent:'false'consoleLog:'false'
通过 ignoreColumn 可以指定哪几列不被导出.
JS-XLSX
导入 excel 2007 以上版本, 可以使用 JS-XLSX 插件. 首先导入 js 包:
Node.js 安装:
然后可以使用这个插件把 XLSX 文件转为 JSON, CSV, Formula 输出.
function get_radio_value( radioName ) {
var radios = document.getElementsByName( radioName );
for( var i = 0; i < radios.length; i++ ) {
if( radios[i].checked ) {
return radios[i].value;
}
}
}
function to_json(workbook) {
var result = {};
workbook.SheetNames.forEach(function(sheetName) {
var roa = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
if(roa.length > 0){
result[sheetName] = roa;
}
});
return result;
}
function to_csv(workbook) {
var result = [];
workbook.SheetNames.forEach(function(sheetName) {
var csv = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetName]);
if(csv.length > 0){
result.push("SHEET: " + sheetName);
result.push("");
result.push(csv);
}
});
return result.join("\n");
}
function to_formulae(workbook) {
var result = [];
workbook.SheetNames.forEach(function(sheetName) {
var formulae = XLSX.utils.get_formulae(workbook.Sheets[sheetName]);
if(formulae.length > 0){
result.push("SHEET: " + sheetName);
result.push("");
result.push(formulae.join("\n"));
}
});
return result.join("\n");
}
var tarea = document.getElementById('b64data');
function b64it() {
var wb = XLSX.read(tarea.value, {type: 'base64'});
process_wb(wb);
}
function process_wb(wb) {
var output = "";
switch(get_radio_value("format")) {
case "json":
output = JSON.stringify(to_json(wb), 2, 2);
break;
case "form":
output = to_formulae(wb);
break;
default:
output = to_csv(wb);
}
if(out.innerText === undefined) out.textContent = output;
else out.innerText = output;
}
var drop = document.getElementById('drop');
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
var i,f;
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
var data = e.target.result;
//var wb = XLSX.read(data, {type: 'binary'});
var arr = String.fromCharCode.apply(null, new Uint8Array(data));
var wb = XLSX.read(btoa(arr), {type: 'base64'});
process_wb(wb);
};
//reader.readAsBinaryString(f);
reader.readAsArrayBuffer(f);
}
}
function handleDragover(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
if(drop.addEventListener) {
drop.addEventListener('dragenter', handleDragover, false);
drop.addEventListener('dragover', handleDragover, false);
drop.addEventListener('drop', handleDrop, false);
}插件作者地址:
author
不使用 HTML5 的话, 就要上传文件到服务器端, 服务器再来解析处理文件.例子如下:
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
}
publicclassHomeController:Controller{// This action renders the formpublicActionResultIndex(){returnView();}// This action handles the form POST and the upload[HttpPost]publicActionResultIndex(HttpPostedFileBasefile){// Verify that the user selected a fileif(file!=null&&file.ContentLength>0){// extract only the fielnamevarfileName=Path.GetFileName(file.FileName);// store the file inside ~/App_Data/uploads foldervarpath=Path.Combine(Server.MapPath("~/App_Data/uploads"),fileName);file.SaveAs(path);}// redirect back to the index action to show the form once againreturnRedirectToAction("Index");}}