原生js 导出excel

使用原生js导出,不需要插件
动手试过,确实可行

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<button onclick='tableToExcel()'>导出</button>
    <script>  
    const tableToExcel = () => {
        // 要导出的json数据
        const jsonData = [
            {
                name:'张三',
                phone:'123456',
                email:'1111111'
            },
            {
                name:'李四',
                phone:'123456',
                email:'2222222'
            },
            {
                name:'王五',
                phone:'123456',
                email:'3333333'
            },
            {
                name:'赵六',
                phone:'123456',
                email:'4444444'
            },
        ]
        // 列标题 ----和数据顺序对应
        let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
		
        // 循环遍历,每行加入tr标签,每个单元格加td标签
        for(let i = 0 ; i < jsonData.length ; i++ ){
            str+='<tr>';
            for(const key in jsonData[i]){
                // 增加\t为了不让表格显示科学计数法或者其他格式
                str+=`<td>${ jsonData[i][key] + '\t'}</td>`;     
            }
            str+='</tr>';
        }
        const fileName = this.selectData.title || '下载';
      const worksheet = this.selectData.title || 'Sheet1';//sheet名字
      const base64 = s => window.btoa(unescape(encodeURIComponent(s)));
      const style = `
        td:{text-align:center}
      `;
      // 下载的表格模板数据
      const 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>${style}</style>
        </head><body><table border="1" cellspacing="0" cellpadding="0">${str}</table></body></html>`;
      const url = 'data:application/vnd.ms-excel;base64,' + base64(template);
      // 下载模板
      const a = document.createElement('a');
      a.download = `${fileName}.xls`;
      a.href = url;
      a.click();
    };


  
    </script>
</body>
</html>

unescape 已被废弃,可尝试下面的方法

// 创建blob
   let blob = new Blob([html], { type: "application/msword;charset=UTF-8" });
   // 创建链接
   let url = URL.createObjectURL(blob);
   let link = document.createElement("a");
   link.href = url;
   link.download = exportWordObj.exportName ? exportWordObj.exportName : "文档.doc";
   document.body.appendChild(link);
   // 下载文件
   link.click();
   // 清理
   document.body.removeChild(link);
   URL.revokeObjectURL(url);

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值