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总结1
    shell 获取结果中的第n列,第n行
    automake中Makefile.am和configure.ac的格式及编译过程
    安卓常见错误解决方案
    kotlin 委托
    Kotlin 对象表达式和对象声明
    Kotlin 枚举类
    angular js自定义service的简单示例
    用angular.element实现jquery的一些功能的简单示例
    js判断中出现两个!!是什么意思?
  • 原文地址:https://www.cnblogs.com/lisiyang/p/11171668.html
Copyright © 2011-2022 走看看