Vue中excel导入导出

npm安装

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

在src下创建一个文件夹,包含两个文件:

Blob.js,Export2Excel.js下载地址:https://gitee.com/BenDanXianSheng/excel_relyon.git

然后再main.js中导入这两个文件;

导入code:

HTML:
<input id="upload" type="file" @change="importfxx(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
                importfxx(obj) {
                        let _this = this;
                    console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxx1");
                    let inputDOM = this.$refs.inputer;
                    // 通过DOM取文件数据

                    this.file = event.currentTarget.files[0];

                    var rABS = false; //是否将文件读取为二进制字符串
                    var f = this.file;

                    var reader = new FileReader();
                    //if (!FileReader.prototype.readAsBinaryString) {
                    FileReader.prototype.readAsBinaryString = function(f) {
                        var binary = "";
                        var rABS = false; //是否将文件读取为二进制字符串
                        var pt = this;
                        var wb; //读取完成的数据
                        var outdata;
                        var reader = new FileReader();
                        reader.onload = function(e) {
                        var bytes = new Uint8Array(reader.result);
                        var length = bytes.byteLength;
                        for (var i = 0; i < length; i++) {
                            binary += String.fromCharCode(bytes[i]);
                        }
                        var XLSX = require("xlsx");
                        if (rABS) {
                            wb = XLSX.read(btoa(fixdata(binary)), {
                            //手动转化
                            type: "base64"
                            });
                        } else {
                            wb = XLSX.read(binary, {
                            type: "binary"
                            });
                        }
                        outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
                        console.log(outdata)
                        _this.$message({
                            message: '导入成功',
                            type: 'success'
                        });
                        };
                        reader.readAsArrayBuffer(f);
                    };
                    if (rABS) {
                        reader.readAsArrayBuffer(f);
                    } else {
                        reader.readAsBinaryString(f);
                    }
                }

导出code:

        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
        },
        export2Excel() {
            require.ensure([], () => {
                const { export_json_to_excel } = require('../../excel/Export2Excel');//这里必须使用绝对路径
                const tHeader = ['事项','重要程度','状态','成果物','开始时间','结束时间','延期时间','成果物'];// 导出的表头名
                const filterVal = ['title', 'level', 'status', 'gain','startdate', 'enddate', 'newenddate','description', ];// 导出的表头字段名
                var xlsxTable = this.tableData4Dc
                xlsxTable.forEach((item,i)=>{
                    console.log(item)
                    if(item.level==2){
                        item.level = "重要"
                    }else{
                        item.level = "一般"
                    }
                    if(item.status==1){
                        item.status="进行中"
                    }else if(item.status==2){
                        item.status ="审核中"
                    }else{
                        item.status="已完成"
                    }
                })
                const list = xlsxTable;
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, this.responsibility);// 导出的表格名称,根据需要自己命名
      })
       },

猜你喜欢

转载自blog.csdn.net/gn123gn123/article/details/84320515