前端实现excel文件的导入导出

导入文件

html:

   <el-dropdown v-waves @command="handleBatchCommand">
            <el-button size="small" class="search-btn ">操作</el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="import">
                    导入
                    <input type="file" ref="importFile" @change="handleImportChange" hidden>
                </el-dropdown-item>
                <el-dropdown-item command="export">批量导出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

js:

             // 批量操作
            handleBatchCommand(value) {
                switch (value) {
                    case "import":
                        this.handleImport();
                        break;
                    case "export":
                        this.handleExport();
                        break;
                }
            },
            handleImport() {
                this.$refs.importFile.value ='';
                this.$refs.importFile.click();
            },
            handleImportChange() {
                const files = this.$refs.importFile.files[0];
                if (!files){
                    this.$message("请选择导入文件","error")
                }else{
                    if(!/\.(xlsx)$/.test(files.name)){
                        this.$message("导入文件格式不正确","error")
                    }else{
                            const data = new FormData();
                            data.append("file", files);
                            //接口 post数据
                            uploadVehicle(data).then(({data}) => {
                                this.$message.success("导入成功");
                                //重新刷新数据
                                this.handleRefresh(false);
                            })
                    }
                }
            
            }
            }

导出文件

使用的是file-saver和xlsx这两个插件
注意：在使用过程中 我出现了版本不匹配而报错的情况
使用这两个版本亲测可用
“xlsx”: “^0.16.0”
“file-saver”: “^2.0.5”,

html:

//使用el-table
  <el-table id="vehicleTable" v-loading="listLoading" :data="list" border element-loading-text="Loading" fit highlight-current-row @sort-change='sortChange'
            @selection-change="handleSelectionChange" >
            <el-table-column align="center" label="车牌号" width="170">
                <template slot-scope="scope">
                    <div class="plate-no primary">
                        {{ scope.row.vehicleNum || '--' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="车辆类型" align="center" min-width="120">
                <template slot-scope="scope">
                    <div class="type-name">{{ scope.row.vehicleTypeName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="使用性质" align="center" min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.natureTypeName || '--' }}
                </template>
            </el-table-column>
        </el-table>

js:

//expoet-excel.js

/**
 * 表格数据导出excel
 */
import FileSaver from "file-saver";
import XLSX from "xlsx";

/**
 * @param {Object} id 表格 document id
 * @param {Object} fileName 导出文件名
 */
 //TODO:如果<el-table-column>里有使用fixed属性 会导致导出的文件出现两次数据 
 //解决方法：如果没必要使用的话 直接去掉fixed属性 若需要下面代码也做了相关处理
export function exportExcelByTableId(id, fileName) {
    var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
    let fix = document.querySelector('.vxe-table--fixed-left-wrapper');
    let wb;
    if (fix) { //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
        wb = XLSX.utils.table_to_book(document.querySelector("#" + id).removeChild(fix), xlsxParam);
        document.querySelector("#" + id).appendChild(fix);
    } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#" + id), xlsxParam);
    }
    var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });

    try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName + ".xlsx")
    } catch (e) {
        if (typeof console !== 'undefined') {
        }
    }
    return wbout
}

//导入写好的方法
import { exportExcelByTableId } from "@/utils/expoet-excel";
exportExcelByTableId("vehicleTable","车辆列表")

xlsx导出的数据只会导出表格当前页的数据 如果想导出所有数据，可新建一个 el-table 绑定所有数据 然后用display:none隐藏掉