前端JS标签方式导出Excel文件，及Excel文字超出、过长解决
程序员文章站
2024-03-26 11:20:17
...
前端JS标签方式导出Excel文件
如果文本超出Excel表格挡到其他表格，可以在后面加& nbsp;& nbsp; 给后面的表格加空格后将不会被前面的超出文字挡到。样式可以直接加到td标签里，导出的时候Excel会获取得到样式，大致也就这样了哈！
纯属分享，引入jQuery插件即可使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
</head>
<body>
<p style="font-size: 20px;color: red;font-family: 'Arial';">使用JS标签方式将页面数据信息导出xlsx文件</p>
<button onclick='tableToExcel()'>---导出---</button>
</body>
<script>
function tableToExcel(){
//要导出的json数据
var jsonData = [
{
name:'李四',
phone:'123456的水电费多所所多多多多多多多多多多多',
remark:'测试是 '
},
{
name:'张三',
phone:'123456试试水试试水所所所所所所所所dddddddddd',
remark:''
}]
//列标题
var strArr = ['姓名','电话哗哗哗或或或或','备注/其他'];
var str = '<tr><td style="font-weight: bold;font-size:16px; height:40px;font-family: 宋体;" colspan="'+strArr.length+'" align="center">测试</td></tr>';
str += '<tr><td style="height:22px;color: white;background: gray;font-weight: bold;width:'+(strArr[0].length*10+100)+'px;font-family: 宋体;"align="center">'+strArr[0]+'</td>';
str += '<td style="height:22px;color: white;background: gray;font-weight: bold;width:'+(strArr[1].length*10+100)+'px;font-family: 宋体;" align="center">'+strArr[1]+'</td>';
str += '<td style="height:22px;color: white;background: gray;font-weight: bold;width:'+(strArr[2].length*10+100)+'px;font-family: 宋体;"align="center">'+strArr[2]+'</td></tr>';
//循环遍历，每行加入tr标签，每个单元格加td标签
for(var i = 0 ; i < jsonData.length ; i++ ){
str+='<tr>';
str+='<td align="left" style="height:22px;font-family: 宋体;">'+jsonData[i]['name']+ '</td>';
str+='<td align="left" style="overflow:hidden;white-space:nowrap;font-family: 宋体;mso-number-format:\@;z-index:1;">'+jsonData[i]['phone']+ '</td>'; //如果要保留两位小数点加（mso-number-format:0.00）样式
str+='<td align="left" style="overflow:hidden;white-space:nowrap;font-family: 宋体;z-index:2;">'+jsonData[i]['remark']+ ' </td>'; //超长格子隐藏 ,加 是为了防止前一个超出
str+='</tr>';
}
//设置当前时间
var date = new Date();
var year = date.getFullYear();
var dateArr = [date.getMonth() + 1,date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds()];
var strDate = year+'';
for(var i=0;i<dateArr.length;i++){
if (dateArr[i] >= 1 && dateArr[i] <= 9) {
dateArr[i] = "0" + dateArr[i];
}
strDate += dateArr[i];
}
//Worksheet名
var worksheet = '房产信息'+strDate;
var uri = 'data:application/vnd.ms-excel;base64,';
//下载的表格模板数据
var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"';
template +=' xmlns="http://www.w3.org/TR/REC-html40">';
template +=' <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';
template +=' <x:Name>'+worksheet+'</x:Name>';
template +=' <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>';
template +=' </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->';
template +=' </head><body><table>'+str+'</table></body></html>';
var a = document.createElement("a");
a.download = worksheet+".xlsx";
a.href = uri + base64(template) //下载模板
a.click();
}
//输出base64编码
function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }
</script>
</html>