zoukankan      html  css  js  c++  java
  • 前端导出excel文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
      <body>
            <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
            <button onclick='tableToExcel()'>导出</button>
            <script>
                
                    function tableToExcel(){
                      //要导出的json数据
                      const jsonData = [
                        {
                          name:'路人甲',
                          phone:'123456789',
                          email:'000@123456.com'
                        },
                        {
                          name:'炮灰乙',
                          phone:'123456789',
                          email:'000@123456.com'
                        },
                        {
                          name:'土匪丙',
                          phone:'123456789',
                          email:'000@123456.com'
                        },
                        {
                          name:'流氓丁',
                          phone:'123456789',
                          email:'000@123456.com'
                        },
                      ]
                      //列标题,逗号隔开,每一个逗号就是隔开一个单元格
                      let str = `姓名,电话,邮箱
    `;
                   
                      for(let i = 0 ; i < jsonData.length ; i++ ){
                        for(let item in jsonData[i]){
                            str+=`${jsonData[i][item] + '	'},`;     
                        }
                        str+='
    ';
                      }
                      
                      //encodeURIComponent解决中文乱码
                      let uri = 'data:text/csv;charset=utf-8,ufeff' + encodeURIComponent(str);
                      //通过创建a标签实现
                      let link = document.createElement("a");
                      link.href = uri;
                      //对下载的文件命名
                      link.download =  "json数据表.csv";
                      document.body.appendChild(link);
                      link.click();
                      document.body.removeChild(link);
                    }
                 
                </script>           
      </body>
    </html>
    

      原文:https://blog.csdn.net/hhzzcc_/article/details/80419396(感谢大佬的分享)

  • 相关阅读:
    小问题也是大问题
    Java GC(2)
    Java GC(1)
    mac eclipse svn
    svn merge
    LTE,WiMAX与WIFI相关知识链接整理
    【LTE基础知识】承载相关概念介绍
    【LTE基础知识】LTE空口协议分析
    LTE基础知识
    Scapy学习2
  • 原文地址:https://www.cnblogs.com/lianxisheng/p/10893930.html
Copyright © 2011-2022 走看看