jsondata导出excel文件和csv文件【笔记】

最新推荐文章于 2024-04-29 20:31:36 发布

Savannah008

最新推荐文章于 2024-04-29 20:31:36 发布

阅读量368

点赞数

分类专栏：前端开发

前端开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

jsondata导出excel文件和csv文件【笔记】

参考文献 https://blog.csdn.net/hhzzcc_/article/details/80419396

数据demo

var jsonData = [
        {id: '01', content: 'contentValue01'},
        {id: '02', content: 'contentValue02'},
        {id: '03', content: 'contentValue03'},
        {id: '04', content: 'contentValue04'},
        {id: '05', content: 'contentValue05'},
        {id: '06', content: 'contentValue06'},
        {id: '07', content: 'contentValue07'},
        {id: '08', content: 'contentValue08'},
        {id: '09', content: 'contentValue09'},
        {id: '10', content: 'contentValue10'}
    ];

效果

在这里插入图片描述

导出到csv文件

function table_to_csv(jsonData) {
        var str = 'ID,content\n';

        for (var jIndex in jsonData) {
            var jsonItem = jsonData[jIndex];
            str += '' + jsonItem.id + '\t,' + jsonItem.content + '\t\n';
            console.log(jIndex, jsonItem);
        }
        //encodeURIComponent解决中文乱码
        var 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);
    }

导出到excel文件

var str = '<tr><td>ID</td><td>CONTENT</td></tr>';

        for (var jIndex in jsonData) {
            var jsonItem = jsonData[jIndex];
            str += '<tr><td>' + jsonItem.id + '\t</td><td>' + jsonItem.content + '\t</td></tr>';
            console.log(jIndex, jsonItem);
        }

        var worksheet = 'Sheet1';
        var uri = 'data:application/vnd.ms-excel;base64,';

        //下载的表格模板数据
        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)))
    }

效果

在这里插入图片描述

Savannah008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsondata导出excel文件和csv文件【笔记】

jsondata导出excel文件和csv文件【笔记】参考文献 https://blog.csdn.net/hhzzcc_/article/details/80419396数据demovar jsonData = [ {id: '01', content: 'contentValue01'}, {id: '02', content: 'contentVal...
复制链接

扫一扫