前端JS标签方式导出Excel文件，及Excel文字超出、过长解决

最新推荐文章于 2024-08-06 16:10:14 发布

慕云枫

最新推荐文章于 2024-08-06 16:10:14 发布

阅读量4.4k

点赞数

分类专栏：前端文章标签：前端JS标签方式导出Excel文件 Excel文字超出表格挡到其他的表格

本文链接：https://blog.csdn.net/weixin_43992507/article/details/84881813

版权

前端专栏收录该内容

94 篇文章 2 订阅

订阅专栏

简单实现前端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>