前端js导出excel代码及出现的中文乱码和数字过长等问题的解决办法

最新推荐文章于 2024-06-18 10:49:09 发布

进步中的菜鸟

最新推荐文章于 2024-06-18 10:49:09 发布

阅读量1.8w

点赞数 6

文章标签：前端 excel导出中文乱码 js导出table

本来之前写过一个JS导出程序，但是也是网上东拼西凑写出来了，这两天有需求要写个excel导出，然后就出现一堆的问题，就准备记录下来。

原谅我好多东西也是网上百度别人的，但是都汇总了一下，也好给大家看，开始正文：

js导出excel的两种方法：

问题1：遇到导出excel表格时，银行账户号数字过长，导出的数字串变为计数法形式

问题2：js输出汉字乱码问题

方法一：

/*

*@tableId: table的Id

*@fileName: 生成excel文件

* ie浏览器无法导出

*/
function tableToExcel(tableID,fileName){

	var table = document.getElementById(tableID);

	var excelContent = table.innerHTML;

	var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";

	excelFile += "<head><meta charset='UTF-8'><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";

	excelFile += "<body><table>";

	excelFile += excelContent;

	excelFile += "</table></body>";

	excelFile += "</html>";

	console.log(excelFile)

	var link = "data:application/vnd.ms-excel;base64," + base64(excelFile);

	var a = document.createElement("a");

	a.download = fileName+".xls";

	a.href = link;

	a.click();

}

function base64 (content) {

	return window.btoa(unescape(encodeURIComponent(content)));

}

方法二：

/*

*需要引入：jquery.table2excel.js

*

*@$("#tableId"): table的id

*/

$('#btnExport').on('click', function() {

	$("#tableId").table2excel({

		exclude: ".noExl",

		name: "Excel Document Name",

		filename: "myFileName",

		exclude_img: true,

		exclude_links: true,

		exclude_inputs: true

	});

});

以上两种方法在IE浏览器中无法正常使用

若需要支持ie需加以下代码：

if(!!window.ActiveXObject || "ActiveXObject" in window) {//判断是否为ie览器

	var curTbl = document.getElementById("ta");

	var oXL = new ActiveXObject("Excel.Application");

	//创建AX对象excel

	var oWB = oXL.Workbooks.Add();

	//获取workbook对象

	var xlsheet = oWB.Worksheets(1);

	//激活当前sheet

	var sel = document.body.createTextRange();

	sel.moveToElementText(curTbl);

	//把表格中的内容移到TextRange中

	sel.select;

	//全选TextRange中内容

	sel.execCommand("Copy");

	//复制TextRange中内容

	xlsheet.Paste();

	//粘贴到活动的EXCEL中

	oXL.Visible = true;

	//设置excel可见属性

	try {

		var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");

	} catch(e) {

		print("Nested catch caught " + e);

	} finally {

		oWB.SaveAs(fname);

		oWB.Close(savechanges = false);

		//xls.visible = false;

		oXL.Quit();

		oXL = null;

		//结束excel进程，退出完成

		//window.setInterval("Cleanup();",1);

		idTmr = window.setInterval("Cleanup();", 1);

	}

}

再把遇到的问题罗列一下：

问题1：遇到导出excel表格时，银行账户号数字过长，导出的数字串变为计数法形式

解决方案一：

增加了 style="mso-number-format:'\@';" 样式后可以解决

解决方案二：

原来的：excelFile += "<body><table>";

修改为：excelFile += '<body><table style="vnd.ms-excel.numberformat:@">';

style="vnd.ms-excel.numberformat:@"的作用是把数据转换文本格式

问题2：js输出汉字乱码问题

解决方案一：

原来的：excelFile += "<head><meta ><!--[if gte mso 9]>

修改为：excelFile += "<head><meta charset='UTF-8'><!--[if gte mso 9]>

进步中的菜鸟

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
10
评论
前端js导出excel代码及出现的中文乱码和数字过长等问题的解决办法

本来之前写过一个JS导出程序，但是也是网上东拼西凑写出来了，这两天有需求要写个excel导出，然后就出现一堆的问题，就准备记录下来。原谅我好多东西也是网上百度别人的，但是都汇总了一下，也好给大家看，开始正文： js导出excel的两种方法：目录 js导出excel的两种方法：方法一：方法二：以上两种方法在IE浏览器中无法正常使用若需要支持ie需加以下代码：再把遇...
复制链接

扫一扫