zoukankan      html  css  js  c++  java
  • js 将json生成表格并下载

    主要思路如下:

    // 要导出的数据
    var data= [{
        a1: '111',
        a2: '22'
    }];
    // 列标题
    var str = '<tr><td>姓名</td><td>性别</td></tr>';
    // 循环遍历,每行加入tr标签,每个单元格加td标签
    for (let i = 0, len = data.length; i < len; ++i){
        str += '<tr>';
        for (let item in data[i]){
            // 增加	为了不让表格显示科学计数法或者其他格式
            str += `<td>${ data[i][item] + '	'}</td>`;
        }
        str += '</tr>';
    }
    var 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]-->
    </head><body><table>${str}</table></body></html>`;
    //下载模板
    window.location.href = uri + base64(template)

    //输出base64编码
    function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }

      可能会出现科学计数法

     td标签加上  style="mso-number-format:'@';"  样式后 可以解决 ,

    另外,我在npm上发布可一个目前只支持react的组件  npm i xlsx-jsons

    支持json与excle的互转。原理是用js-xlsx封装的组件。有兴趣的同学可以去试试。有其他特殊需求的,可以联系我,不定期更新

  • 相关阅读:
    MySQL InnoDB事务隔离级别脏读、可重复读、幻读
    数据结构与算法-Python/C
    Go语言 转至Nick老师博客
    短信验证功能、邮箱验证功能
    psutil模块
    简单邮件传输协议SMTP
    CSS3主要的几个样式笔记
    cURL的几个经典实例
    Socket进程通信机制
    对PDO的认识
  • 原文地址:https://www.cnblogs.com/lisiyang/p/11171668.html
Copyright © 2011-2022 走看看