使用vue+SheetJS/js-xlsx修改表头并导出excel

先写个静态的数据试试

<button @click="downloadMater">导出excel</button>

methods: {
    //创建表头
    createWs(data, titles) {
        const ws = XLSX.utils.json_to_sheet(
            data,
            {
                header: Object.keys(titles)
            }
        )
        const range = XLSX.utils.decode_range(ws['!ref'])

        for (let c = range.s.c; c <= range.e.c; c++) {
            const header = XLSX.utils.encode_col(c) + '1'
            ws[header].v = titles[ws[header].v]
        }

        return ws
    },
     //导出excel
    downloadMater() {

        const titles = {
            name: '姓名',
            age: '年龄'
        }
        const data = [
            {
                name: 'jzx',
                age: 17
            },
            {
                name: 'wmp',
                age: 17
            }
        ]
        const ws = this.createWs(
            data,
            titles
        )

        let wopts = {
            bookType: 'xlsx',
            bookSST: true,
            type: 'binary'
        };
        let workBook = {
            SheetNames: ['Sheet1'],
            Sheets: {
                'Sheet1': ws
            },
            Props: {}
        };

        FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}), "lists.xlsx")
    },
    // 字符串转字符流
    changeData(s) {
        let buf
        //如果存在ArrayBuffer对象(es6) 最好采用该对象
        if (typeof ArrayBuffer !== 'undefined') {

            //1、创建一个字节长度为s.length的内存区域
            buf = new ArrayBuffer(s.length);

            //2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
            let view = new Uint8Array(buf);

            //3、返回指定位置的字符的Unicode编码
            for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;

        } else {
            buf = new Array(s.length);
            for (let i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }
    }
}

这样就自定义了表头。

再把从api请求到的数据放入，用titles做个对应即可。

参考网站：https://blog.csdn.net/juzipidemimi/article/details/90815730