vue实现excel文件导入导出

前端使用vue实现excel文件的导入导出需要用到两个插件 FileSaver 和 XLSX可使用npm或yarn安装，下边是写好的一个excel.js文件，直接mixin引入即可。

import FileSaver from "file-saver";
import XLSX from "xlsx";

// 导出excel
export const exportExcel = {
    methods: {
        //定义导出Excel表格事件
        /**
          * id 要导出的表格的 css选择器 
          * name 导出后文件的命名
        */
        exportExcel(id,name) {
            /* 从表生成工作簿对象 */
            var wb = XLSX.utils.table_to_book(document.querySelector(id));
            /* 获取二进制字符串作为输出 */
            var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
            });
            try {
                FileSaver.saveAs(
                    //Blob 对象表示一个不可变、原始数据的类文件对象。
                    //Blob 表示的不一定是JavaScript原生格式的数据。
                    //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                    //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                    new Blob([wbout], { type: "application/octet-stream" }),
                    //设置导出文件名称
                    // "sheetjs.xlsx"
                    name
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
        },
    }
}

// 导入excel
export const importExcel = {
    methods: {
        /**
          * e 即为通过elementui upload组件导入的文件
          * callback 通过callback函数来对生成的内容进行处理，方便页面渲染
        */
        importExcel(e, callback) {
            let file = e.file   // 文件信息

            if (!file) {
                // 没有文件
                return false
            } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
                this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
                return false
            }

            const fileReader = new FileReader()
            fileReader.onload = (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表格内容
                
                    callback(exl)
                } catch (e) {
                    console.log('出错了：', e)
                    return false
                }
            }
            fileReader.readAsBinaryString(file)
        }
    }
}

其中导入借助了elementui的upload组件。相关vue代码如下

HTML部分：

<template>
    <div>
        <el-upload
            class="upload"
            action=""
            :multiple="false"
            :show-file-list="false"
            accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            :http-request="toLead">
            <div class="sam-btn-left-btn">
                导入
            </div>
        </el-upload>
    </div>
</template>

JS部分：

methods: {
    toLead (e) {
        this.importExcel(e, vm.handleExcelData)
    },
    handleExcelData() {
        // 处理表格数据
        ...
    }
}