[ 纯前端·导出Excel ] 一招走遍天下

1,266 阅读2分钟


前景:

导出Excel     要求    多级表头 单元格合并行内换行单元格加样式

这些都不是问题,看了这篇葵花宝典,那都不是事!

ok  进入正题。   

<html>
<head>
    <meta charset="UTF-8">
 
</head>
<body>
      <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
      <button onclick='tableToExcel()'>导出</button>
  <script>
            
    function tableToExcel(){
      //要导出的json数据
      const jsonData = [
        {
          name:'第1行',
          phone:'第1行',
          email:'第1行'
        },
        {
          name:'第2行',
          phone:'第2行换行<br>第2行换行',
          email:'第2行换行<br>第2行换行'
        },
        {
          name:'第3行第3行',
          phone:'第3行第3行',
          email:'第3行第3行'
        },
        {
          name:'第4行第4行',
          phone:'第4行第4行',
          email:'第4行第4行'
        },
      ]
      //判断表格内样式,根据需求写
      const Datastyle =[
      	{
          name:0,
          phone:1,
          email:0
        },
        {
          name:1,
          phone:0,
          email:0
        },
        {
          name:1,
          phone:0,
          email:0
        },
        {
          name:1,
          phone:0,
          email:1
        },
      ]
      //列标题
      let str ="<tr><td colspan='3'style='background-color: red;' >合并单元格</td></tr><tr><td>多级表头<br>多级表头<br>多级表头</td><td>表头</td><td>表头</td></tr>"
      //循环遍历,每行加入tr标签,每个单元格加td标签
      for(let i = 0 ; i < jsonData.length ; i++ ){
        str+='<tr>';
        for(let item in jsonData[i]){
        	let cssname = Datastyle[i][item]
			let cssstylea = ''
			if(cssname == 0){
				cssstylea = ''
			}else{
				cssstylea = "'background-color: #bdd7ee'"
			}
            //增加\t为了不让表格显示科学计数法或者其他格式
            str+="<td  style="+cssstylea+">" + jsonData[i][item] + '\t' + "</td>";     
        }
        str+='</tr>';
      }
      //Worksheet名
      let worksheet = '模块名'
      let uri = 'data:application/vnd.ms-excel;base64,';
 
      //下载的表格模板数据
      let template = `<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">
      <head><!--[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]-->
        <style>table td {border: 0.5px solid #000;width:180px;height:50px;font-size:15px;line-height: 40px;}</style>
        </head><body><table>${str}</table></body></html>`;
      	//下载模板
      	//通过创建a标签实现
		let link = document.createElement("a");
		link.href = uri + window.btoa(unescape(encodeURIComponent(template)))
		//对下载的文件命名
		link.download =  "文件名.xls";
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
    }
    
</script>
</body>
</html>

下面放一张效果图

对你有帮助  记得收藏 +点赞啊