zoukankan      html  css  js  c++  java
  • JS导出数据为表格-csv

    <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>

  • 相关阅读:
    设计模式——桥接模式
    设计模式——工厂模式
    挖个坑
    Java 线程应用
    vtep-ctl + add-ls+ bind-ls +br-get-external-id
    ovs vtep 源码Tunnel_Ip
    vtep-ctl del-ls ls0
    vtep-ctl unbind-ls
    virt manager
    ironic 裸金属 failed to mount sysroot
  • 原文地址:https://www.cnblogs.com/webwangjie/p/10913516.html
Copyright © 2011-2022 走看看