前端实现导出

导出功能：

1. 后端开发
2. 前端开发

首先说说后端实现的逻辑：

1. 不带参数的导出 （直接返回服务器地址，通过a标签自己实现下载即可）
2. 带参数的导出 （拼接参数，动态创建a标签下载）

纯前端也可以实现导出：

1. 安装

npm i js-xlsx

或者直接引入

https://cdn.bootcdn.net/ajax/libs/xlsx/0.10.0/xlsx.full.min.js

• 读取Excel
  读取excel主要通过XLXS.read(data,{ type: type })，返回一个叫WorkBook的对象

file2Xce (file) {
   return new Promise(function (resolve, reject) {
    const reader = new FileReader()
    reader.onload = function (e) {
        const data = e.target.result
        this.wb = XLSX.read(data, {
        type: 'binary'
        })
        const result = []
        this.wb.SheetNames.forEach((sheetName) => {
        result.push({
            sheetName: sheetName,
            sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
        })
        })

        const exlname = this.wb.SheetNames[0] // 取第一张表
        const exl = XLSX.utils.sheet_to_json(this.wb.Sheets[exlname])

        resolve(exl)
    }
    // reader.readAsBinaryString(file.raw)
    reader.readAsBinaryString(file) // 传统input方法
    })
}

调用file2Xce函数就可以得到数据。
完整的代码如下：

httpRequest (e) {
    let file = e.file // 文件信息
    //console.log('e: ', e)
    console.log('file: ', e.file)
    if (!file) {
        // 没有文件
        return false
    }
    const isLt20M = e.file.size / 1024 / 1024 < 20;
    if(!isLt20M){
        this.$message({ message: '上传文件大小不能超过 20MB!', type: 'warning' });
        this.$refs.upload.clearFiles();
        return;
    }else {
        this.file2Xce(file).then(tabJson => {
            console.log('tabJson',tabJson);
            this.$emit('getData',tabJson);
        })
    }

    return;
    const fileReader = new FileReader()
    let result = [];
    fileReader.onload = (ev) => {
        console.log('ev',ev);
        try {
            const data = ev.target.result
            const workbook = XLSX.read(data, {
            type: 'binary' // 以字符编码的方式解析
            })
            const exlname = workbook.SheetNames[0] // 取第一张表
            const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容

            console.log('exl',exl)
            this.$emit('getData',exl);
            // 将 JSON 数据挂到 data 里
            return;
            for(let i in exl[0]){
            //console.log('i',i);
            //console.log('exl[i]',exl[i]);

            let rowTable = {};
            //这里的rowTable的属性名注意要与上面表格的prop一致
            //sheetArray的属性名与上传的表格的列名一致
            console.log('exl[item]',exl[item]);
            rowTable.ID = exl[i].序号;
            rowTable.name = exl[i].设备名称;
            rowTable.code = exl[i].设备码;

            this.tableData.push(rowTable)
            }

            //this.tableData = exl
            // document.getElementsByName('file')[0].value = '' // 根据自己需求，可重置上传value为空，允许重复上传同一文件
        } catch (e) {
            console.log('出错了：：')
            return false
        }
    }
    fileReader.readAsBinaryString(file)
}

参考文章

1. 如何使用JavaScript实现纯前端读取和导出excel文件
2. SheetJS