jsondata導出excel文件和csv文件【筆記】

jsondata導出excel文件和csv文件【筆記】

  1. 參考文獻 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)))
    }

效果

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章