XLSX纯前端导出（简单导出）

npm install xlsx 安装插件

直接上代码
 

<div>
        <a id="exportExcel"></a>
        <el-button class="button" @click="btnExportClick(excelData)">导出Excel</el-button>
    </div>

import XLSX from 'xlsx';
export default {
    data() {
        return {
            //导出el（元素）
            elExport: '',
            //测试导出数据
            excelData: [
                { name: '红烧鱼', size: '大', taste: '微辣', price: '40', remain: '100' },
                { name: '麻辣小龙虾', size: '大', taste: '麻辣', price: '138', remain: '200' },
                { name: '清蒸小龙虾', size: '大', taste: '清淡', price: '138', remain: '200' }
            ],
            //根据字段显示对应的头
            exceheader: [{
                name: "name",
                headername: "菜品"

            }, {
                name: "size",
                headername: "大小份"

            }, {
                name: "taste",
                headername: "菜品"

            }, {
                name: "price",
                headername: "零售"

            }, {
                name: "remain",
                headername: "团购"

            }]
        }
    },
    mounted() {
        this.elExport = document.getElementById('exportExcel')
    },
    methods: {
        //点击导出按钮
        btnExportClick(rs) {
            //生成列名
            let data = [{}]
            for (let k in rs[0]) {
                this.exceheader.forEach((item) => {
                    if (item.name == k) {
                        console.log(data[0][k]);
                        data[0][k] = item.headername
                    }
                })
            }
            data = data.concat(rs)
            console.table(data)
            this.exportExcel(data, '导出数据')
        },
        //导出 Excel
        exportExcel(json, downName, type) {
            //获取列名
            let keyMap = []
            for (let k in json[0]) {
                keyMap.push(k)
            }
            //用来保存转换好的json
            let tmpdata = []
            json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
                v: v[k],
                position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
            }))).reduce((prev, next) => prev.concat(next)).forEach(function (v) {
                console.log(v);
                tmpdata[v.position] = {
                    v: v.v
                }
            })
            let outputPos = Object.keys(tmpdata)  //设置区域，比如表格从A1到D10
            let tmpWB = {
                SheetNames: ['mySheet'], // 保存的表标题
                Sheets: {
                    'mySheet': Object.assign({},
                        tmpdata, //内容
                        {
                            '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
                        })
                }
            }

            //创建二进制对象写入转换好的字节流
            let tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB,
                { bookType: (type === undefined ? 'xlsx' : type), bookSST: false, type: 'binary' } //这里的数据是用来定义导出的格式类型
            ))], {
                type: ''
            })
            console.log(URL.createObjectURL(tmpDown));
            this.elExport.download = downName + '.xlsx'  //下载名称
            this.elExport.href = URL.createObjectURL(tmpDown)  //绑定a标签到新创建对象超链接
            this.elExport.click()  //模拟点击实现下载

            //释放，用 URL.revokeObjectURL() 释放
            setTimeout(() => URL.revokeObjectURL(tmpDown), 100)
        },
        //字符串转字符流
        s2ab(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]。
        getCharCol(n) {
            let s = ''
            let m = 0
            while (n > 0) {
                m = n % 26 + 1
                s = String.fromCharCode(m + 64) + s
                n = (n - m) / 26
            }
            return s
        },
    }
}

效果