欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端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']+ '&nbsp;&nbsp;</td>';  //超长格子隐藏 ,加&nbsp;是为了防止前一个超出
        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>