js-xlsx（二）json数据导出excel

版权声明：本文为博主原创文章，非商业转载请附上地址与作者信息，谢谢！ https://blog.csdn.net/jx950915/article/details/81532541

已经有两篇文章写了怎么导出json到excel，不过那个插件只能做这一项工作，为了结合excel上传导入json数据，所以用js-xlsx这个插件再弄一次

js支持

1、js-xlsx
2、filesave (如果想像我这样引入，需要在源代码中删除最前面的export)
3、mock.js

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="../js/xlsx.core.min.js"></script>
<script src="../js/fileSave.js"></script>
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>

html

<button onclick="downloadExl(students)">导出</button>
<script>
     var students = [];
    Mock.mock(
        'http://mockjs', {
            'tableData|20000':[{
                "userName": '@name', //模拟名称
                "age|1-100": 100, //模拟年龄(1-100)
                "color": "@color", //模拟色值
                "date": "@date('yyyy-MM-dd')", //模拟时间
                "url": "@url()", //模拟url
            }]

        }
    );
    $.ajax({
        url: "http://mockjs", //请求的url地址
        dataType: "json", //返回格式为json
        async: false, //请求是否异步，默认为异步，这也是ajax重要特性
        data: {}, //参数值
        type: "GET", //请求方式
        success:function(res){
            console.log(res.tableData);
            students = res.tableData;  
            // if(res.tableDate == 0)  return;                                                        
        }
    });

    function downloadExl(data, type) {

        var keys = Object.keys(data[0]);
        var firstRow = {};
        keys.forEach(function (item) {
            firstRow[item] = item;
        });
        data.unshift(firstRow);

        var content = {};

        // 把json格式的数据转为excel的行列形式
        var sheetsData = data.map(function (item, rowIndex) {
            return keys.map(function (key, columnIndex) {
                return Object.assign({}, {
                    value: item[key],
                    position: (columnIndex > 25 ? getCharCol(columnIndex) : String.fromCharCode(65 + columnIndex)) + (rowIndex + 1),
                });
            });
        }).reduce(function (prev, next) {
            return prev.concat(next);
        });

        sheetsData.forEach(function (item, index) {
            content[item.position] = { v: item.value };
        });

        //设置区域,比如表格从A1到D10,SheetNames:标题，
        var coordinate = Object.keys(content);
        var workBook = {
            SheetNames: ["helloSheet"],
            Sheets: {
                "helloSheet": Object.assign({}, content, { "!ref": coordinate[0] + ":" + coordinate[coordinate.length - 1] }),
            }
        };
        //这里的数据是用来定义导出的格式类型
        var excelData = XLSX.write(workBook, { bookType: "xlsx", bookSST: false, type: "binary" });
        var blob = new Blob([string2ArrayBuffer(excelData)], { type: "" });
        saveAs(blob, "hello.xlsx");
    }
    //字符串转字符流
    function string2ArrayBuffer(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    // 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。
    function getCharCol(n) {
        let temCol = "",
            s = "",
            m = 0
        while (n > 0) {
            m = n % 26 + 1
            s = String.fromCharCode(m + 64) + s
            n = (n - m) / 26
        }
        return s
    }
</script>

效果