美文网首页
2019-07-16

2019-07-16

作者: 大筒木周助 | 来源:发表于2019-07-16 16:27 被阅读0次

    <html>

    <head>

      <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>

      <button onclick='tableToExcel()'>导出</button>

    </head>

    <body>

      <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 = `姓名,电话,邮箱\n`;

          //增加\t为了不让表格显示科学计数法或者其他格式

          for(let i = 0 ; i < jsonData.length ; i++ ){

            for(let item in jsonData[i]){

                str+=`${jsonData[i][item] + '\t'},`;   

            }

            str+='\n';

          }

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

    相关文章

      网友评论

          本文标题:2019-07-16

          本文链接:https://www.haomeiwen.com/subject/pautlctx.html