vue---excel导入导出以及本地模板下载


            选取文件
        
        上传文件
        

beforeUpload(file) {
            const Xls = file.name.split('.');
            const islt20 = file.size / 1024 / 1024 < 20;
            if (Xls[1] == 'xls' || Xls[1] == 'xlsx') {
            } else {
                this.$message.warning('只能上传xls或者xlsx格式的文件');
                return;
            }
            if (!islt20) {
                this.$message.warning('文件大小不能超过20M');
                return;
            }
            this.file = file;
            return true;
        },
        async uploadRequest() {
            let formData = new FormData();
            formData.append('file', this.file);
            let res = await request({
                baseURL: '',
                url: '',
                methods: 'post',
                data: formData,
                onUploadProgress(event){
                    if(event.lengthComputable){
                        this.percentage = Math.floor(event.loaded/event.total * 100)
                    }
                }
            });
            if (res.resultCode == '00') {
                this.$message.success(res.resultData.message);
            } else {
                this.$message.success(res.resultData.message);
            }
        },
        submitUpload(){
            this.$refs.upload.submit()
        },

 

上传与下载






 

excel 转为表格导入导出



//..................导入Excel.......................................................
importfxx(obj) {
    this.file = obj;
    var rABS = false; //是否将文件读取为二进制字符串
    var f = this.file;
    var _this = this;
    var reader = new FileReader();
    //读取文件内容
    FileReader.prototype.readAsBinaryString = function(f) {
        var binary = ''; //二进制
        var rABS = false; //是否将文件读取为二进制字符串
        var wb; //读取完成的数据
        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]); //Unicode 编码转为一个字符
            }
            //如果没有在main.js中引入,则此处需要引入,用于解析excel
            // var XLSX = require("xlsx");
            if (rABS) {
                wb = XLSX.read(btoa(fixdata(binary)), {
                    //手动转化
                    type: 'base64'
                });
            } else {
                wb = XLSX.read(binary, {
                    type: 'binary'
                });
            }
            //excel文件导出并解析成JSON,这里的条件是本地表名与Excel相同
            _this.tableData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            _this.notifyInstance.close();
        };
        reader.readAsArrayBuffer(f);
    };
    if (rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
},


//....................导出Excel.................................................
getExcel() {
    require.ensure([], () => {
        const { export_json_to_excel } = require('../../introduce/Export2Excel.js')
        const tHeader = ['姓名', '年龄']
        const filterVal = ['name', 'age']
        const list = this.tableDate
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '导出列表名称')
    })
},

formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
},

 

你可能感兴趣的:(vue)