zoukankan      html  css  js  c++  java
  • 前端通过csv导出excel表格demo

    敬上代码

    <html>
    <head>
    <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
    <button onclick='tableToExcel()'>导出</button>
    </head>
    <body>
    <script>
    
    function tableToExcel(){
    //要导出的json数据
    var 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标签实现
    var link = document.createElement("a");
    link.href = uri;
    //对下载的文件命名
    link.download = "json数据表.csv";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    }
    
    </script>
    </body>
    </html>
  • 相关阅读:
    第01组 Beta冲刺(2/5)
    第01组 beta冲刺(1/5)
    软工实践个人总结
    第01组 每周小结(3/3)
    第01组 每周小结(2/3)
    第01组 每周小结 (1/3)
    第01组_Beta冲刺总结
    第01组 Beta冲刺(5-5)
    第01组 Beta冲刺(4-5)
    第01组 Beta冲刺(3-5)
  • 原文地址:https://www.cnblogs.com/zhou195/p/10106547.html
Copyright © 2011-2022 走看看