Vue项目实现导入导出Excel表格功能

前提:在我的项目中我使用的是ElementUi前端UI框架,用到的是里面的Upload上传组件。

  

第一步:需要安装三个依赖

  npm install -S file-saver xlsx  (这里其实安装了2个依赖)

  npm install -D script-loader

第二步:在main.js文件中全局导入挂载xlsx插件

  //  导入excel插件

  import XLSX from 'xlsx'

  Vue.prototype.XLSX = XLSX

第三步:在src目录新建一个文件夹(名字随意),在这个文件夹里面放入2个JS文件分别是:Blob.js和Export2Excel.js,网上可百度下载。

  

第四步,需要的页面的template标签中开始写代码(我先写导入的代码)

复制代码
<!-- 导入Excel -->
<el-upload
   action="/上传文件的接口"
   :on-change="onChange"
   :auto-upload="false"
   :show-file-list="false"
   accept=".xls, .xlsx" >
   <el-button type="warning" icon="el-icon-folder-add">批量导入</el-button>
</el-upload>
复制代码

第五步:然后在  methods: {}中配置方法,代码如下:

复制代码

// ----------以下为导入Excel数据功能--------------
// 文件选择回调
onChange(file, fileList) {
    console.log(fileList);
    this.fileData = file; // 保存当前选择文件
    this.readExcel(); // 调用读取数据的方法
},
// 读取数据
readExcel(e) {
    console.log(e);
    let that = this;
    const files = that.fileData;
    console.log(files);
    if (!files) {
        //如果没有文件
        return false;
    } else if (!/.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确,请上传xls或者xlsx格式");
        return false;
    }
    const fileReader = new FileReader();
    fileReader.onload = ev => {
        try {
            const data = ev.target.result;
            // console.log(data)
            const workbook = this.XLSX.read(data, {
                type: "binary"
            });
            console.log(workbook.SheetNames);
            if (workbook.SheetNames.length >= 1) {
                this.$message({
                    message: "导入数据表格成功",
                    showClose: true,
                    type: "success"
                });
            }
            const wsname = workbook.SheetNames[0]; //取第一张表
            const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
            console.log(ws);
            that.outputs = []; //清空接收数据
            for (var i = 0; i < ws.length; i++) {
                var sheetData = {
                    // 键名为绑定 el 表格的关键字,值则是 ws[i][对应表头名]
                    id: ws[i]["id"],
                    stuNumber: ws[i]["学号"],
                    stuName: ws[i]["姓名"],
                    sex: ws[i]["性别"],
                    tel: ws[i]["电话"],
                    xueyuan: ws[i]["学院"],
                    banji: ws[i]["班级"],
                    lyNumber: ws[i]["楼宇号"],
                    sushe: ws[i]["宿舍号"]
                };
                that.studentlist.unshift(sheetData);
            }
            this.$refs.upload.value = "";
        } catch (e) {
            return false;
        }
    };
    // 如果为原生 input 则应是 files[0]
    fileReader.readAsBinaryString(files.raw);
},
复制代码

  

此时导入的功能就结束了,下面开始实现导出的功能

  第一步,在template标签中写入导出的按钮,并绑定单击事件,代码如下:

<el-button type="warning" icon="el-icon-download" @click="exportToExcel">批量导出</el-button>

  第二步:在methods{}方法中写对应的方法

复制代码
// ----------以下为导出Excel数据功能--------------
exportToExcel() {
    //excel数据导出
    require.ensure([], () => {
        const { export_json_to_excel } = require("../../excel/Export2Excel");
        const tHeader = [
            "id",
            "学号",
            "姓名",
            "性别",
            "联系电话",
            "宿舍号",
            "学院",
            "班级",
            "楼宇号"
        ];
        const filterVal = [
            "id",
            "stuNumber",
            "stuName",
            "sex",
            "tel",
            "sushe",
            "xueyuan",
            "banji",
            "lyNumber"
        ];
        const list = this.studentlist;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "学生列表excel");
    });
},
formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]));
},
复制代码

posted @   田心夂  阅读(3669)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示