JS将Datatable表格数据导出为CSV文件

最新推荐文章于 2024-04-28 18:06:32 发布

MTonj

最新推荐文章于 2024-04-28 18:06:32 发布

阅读量2.2k

点赞数 1

分类专栏：前端文章标签： csv

本文链接：https://blog.youkuaiyun.com/MTonj/article/details/88094698

版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Web页面中实现Datatable表格数据的导出功能，特别是将其转换为CSV格式，以便用户可以下载为Excel表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求:将web页面datatable导出成Excel表格,要求为CSV格式文件

导出按钮点击事件如下:

/**
 * 导出csv按钮点击事件
 * @param current
 * @returns
 */
function exportCsv(current){
	// 获取表格数据
	var data = JSON.stringify(table.rows().data());//table 为datatable实例
	var date = new Date();
	var timename = date.format("YYYY-MM-DD hh:mm:ss");//当前时间
	if (data == '')
	return;
    outCsv(data, "导出表格"+timename, true);
}


/**
 * 导出CSV方法
 * @param JSONData  json数据
 * @param ReportTitle  导出的表格标题
 * @param ShowLabel   是否显示字段名
 * @returns
 */
 function outCsv(JSONData, ReportTitle, ShowLabel) {
	var CSV = '';
	 //如果JSONData不是一个对象然后JSON.parse将解析对象中的JSON字符串      
	var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
	$.each(arrData,function(i,e){
		e.time=new Date(e.time).format("YYYY-MM-DD hh:mm:ss");//时间格式化
	})

    if (ShowLabel) {
		var row = "";
		var $trs = $("#tableObj").find("tr");//#tableObj 为datatable的id
		var $tds = $trs.eq(0).find("th");
		//这个循环将从数组的第一个索引中提取标签。
		for (var j = 0; j < $tds.length; j++) {
			row += $tds.eq(j).text() + ",";
		 }
		row = row.slice(0, -1);// 截取对象内的数据。
		CSV += row + '\r\n';// 附加带换行符的标签行 	
	}
	//开始遍历取数据
	for (var i = 0; i < arrData.length; i++) {
	   var row = "";
	  //第二环路将提取每一列并将其转换成字符串逗号分开
	   for (var index in arrData[i]) {
		   if (arrData[i][index] instanceof Date) {
			  row += '"' + arrData[i][index].toLocaleString() + '",';
		   }else{
			  row += '"' + arrData[i][index] + '",';
		   }
		}
		row.slice(0, row.length - 1);
		CSV += row + '\r\n';
	  }
	  if (CSV == '') {
	      alert("Invalid data");
	       return;
	  }
	  // 定义一个文件名一个文件名
	  var fileName = "";
	  fileName += ReportTitle.replace(/ /g, "_");
	  // if browser is IE
	  if (window.navigator.msSaveOrOpenBlob) {
	      var csvContent = "\ufeff";
	      var uriie = csvContent + CSV;
	      var blob = new Blob([decodeURIComponent(encodeURI(uriie))], {
	            type: "data:text/csv;charset=utf-8,"
	      });
	      navigator.msSaveBlob(blob, fileName + '.csv');
	 } else {
	      var csvContent = "data:text/csv;charset=utf-8,\ufeff";
	      var uriother = csvContent + CSV;
	      // 第一种实现
	      var encodedUri = encodeURI(uriother);
	      var link = document.createElement("a");
	      link.setAttribute("href", encodedUri);
	      link.setAttribute("download", fileName + ".csv");
	      document.body.appendChild(link);
	      link.click();
	 }
 }