前端JSON转excel下载

前端JSON转excel下载

方法一

        let jsonData = [{
            id: "1",
            grade: "大二",

        }, {
            id: "1",
            grade: "大二",
            name: "Mike"
        }];
        var str = 'Id,年纪,姓名\n';
        for (let i = 0; i < jsonData.length; i++) {
            for (let item in jsonData[i]) {
                str += `${jsonData[i][item] + '\t,'}`;
            }
            console.log(str);
            str = str + '\n';
        };
        //  toLargerCSV(jsonData) { 
        if ('download' in document.createElement('a')) { // 非IE下载 
            var blob = new Blob([str], {
                type: "text/plain;charset=utf-8"
            });
            //解决中文乱码问题
            blob = new Blob([String.fromCharCode(0xFEFF), blob], {
                type: blob.type
            });
            var object_url = window.URL.createObjectURL(blob);
            var link = document.createElement("a");
            link.href = object_url;
            link.download = "数据列表.xls";
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href); // 释放URL 对象
            document.body.removeChild(link);
        } else { // IE10+下载 
            var blob = new Blob([str], {
                type: "text/plain;charset=utf-8"
            });
            //解决中文乱码问题
            blob = new Blob([String.fromCharCode(0xFEFF), blob], {
                type: blob.type
            });
            const fileName = '数据列表.xls';
            navigator.msSaveBlob(blob, fileName);
        }
    }

方法二

npm install -save  js-export-excel
const ExportJsonExcel = require('js-export-excel')

或

<script src="https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js"></script>

<script>
	function getExcel(){
		var option={};
		option.fileName = 'excel'
		option.datas=[
			{
				sheetData:[//后端返回的数据表格json数据
					{name:'lili',age:'18'},
					{name:'mary',age:'20'}
				],
				sheetHeader:['姓名','年龄'],//前端指定的表头
                sheetName: 'sheet',
                sheetFilter: ['name', 'age']
			},
			{
				sheetData:[//表格2的内容
					{name:'lili',grade:'90'},
					{name:'mary',grade:'99'}
				],
				sheetHeader:['姓名','成绩']
			}
		];
		var toExcel=new ExportJsonExcel(option);
		toExcel.saveExcel();
	}
</script>