导入文件，返回流的话就下载excel文件，返回json数据就把数据放在表格中

无忧勾勾

已于 2022-07-14 18:34:34 修改

阅读量314

点赞数

分类专栏： requestion 前端文章标签： json 前端 vue elementui

于 2022-07-14 17:54:30 首次发布

本文链接：https://blog.csdn.net/free_and_strong/article/details/125789085

版权

requestion 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

导入文件，返回流的话就下载excel文件，返回json数据就把数据放在表格中

温馨提示：FDAPP_HOST是本公司配置，actionUrl是本公司接口，如若使用该方法需要替换掉哦
xmflid也是本人导入文件需要上传的参数，具体问题具体修改哦，本人只为记录工作中遇到的一些问题
功能介绍：通过选择样本大类，动态获取表头，通过导入文件获取表格数据，如果导入文件里面的数据填写有问题（未按规则填写，比如是否采样（01：是，02：否）要填写数字，不能填写汉字），会返回流，直接下载错误文件，如果返回数组对象则填入表格中

样本大类下拉

<el-form-item label="样本大类" prop="ybdl">
    <el-select v-model="form.ybdl" placeholder="请选择" clearable @change="changeYbdlList(form.ybdl)">
        <el-option
	        v-for="item in ybdlData"
	        :key="item.dicCode"
	        :label="item.dicName"
	        :value="item.dicCode"
        >
        </el-option>
    </el-select>
</el-form-item>

上传文件

<el-upload
 		style="display: inline-block;"
        :headers="headers"
         action="String"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-upload="beforeAvatarUpload"
        :on-error="handleError"
        :http-request="uploadSectionFile"
        :show-file-list="false"
        multiple
        ref="upload"
    >
    <el-button type="primary"> 导入文件</el-button>
</el-upload>

动态表格

<ez-table 
    :data="tableData.result" 
    :header-cell-style="{ background: '#F5F7FA' }"
    stripe
    style="width: 100%"
    >
    <ez-table-column 
        v-for="(it,index) in tableData.listKey" 
        :key="index" 
        :prop="it.colkey" 
        :label="it.colname"
        align="center">
    </ez-table-column>
</ez-table>

import { FDAPP_HOST } from '@utils/constant';
import { inspectionManApi } from '../../request/inspectionMan.js';
data() {
      return {
	      form:{
	          slkscode: '', 
	      	  ybdl: ''
	      },
	      fileType: '',
	      headers: {
	          backdoor: true,
	      },
          actionUrl: 'sjsqgl/yjsjsq/upload',
          fdappHost: FDAPP_HOST,
		  xmflid: '', // 上传文件需要上传的样本大类，参数
		  tableData: {
            result: [],
            listKey: []
          },
          ybdlData: [],
      }
}

// 获取样本大类, 可以根据选择科室切换样本大类数据
getYbdlList(){
    inspectionManApi.getSampleList({ kscode: this.form.slkscode }).then(res => {
        this.ybdlData = res;
    });
},
        
// 根据样本大类查询表头
changeYbdlList(val){
	this.xmflid = val;
    inspectionManApi.getSampleTitle(val).then(res => {
        let listKey = res;  
        // 只展示接口返回数据中ishide等于0的
        this.tableData.listKey = listKey.filter(col => col.ishide == '0' );
        this.tableData.result = [];
    }); 
},

// 导入文件
handleRemove(file, fileList) {
    console.log(file, fileList,'handleRemove');
},
handlePreview(file) {
    console.log(file,'handlePreview');
},

beforeAvatarUpload(file) {
    this.fileType = file.type;
    if ( 
        // .xlsx
        file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
        // .xls	
        file.type == 'application/vnd.ms-excel' || 
        // .xlsm
        file.type == 'application/vnd.ms-excel.sheet.macroEnabled.12'  
    )
    {
        // this.$message({
        //     showClose:true,
        //     message:'上传成功',
        //     type:'success'
        // });
    }
    else {
        this.$message({
            showClose: true,
            message: '请上传  Excel  格式的文件',
            type: 'warning',
        });
        return false;
    }
},
handleError(err){
    err = err.toString();
    let errorInfo =err.substring(6,err.length);
    errorInfo = JSON.parse(errorInfo); 
    if(errorInfo){
        if(errorInfo.status!=200){
            this.fullscreenLoading = false;
            this.$message({
                message: errorInfo.message,
                type: 'warning'
            });
            return;
        }
    }
},
uploadSectionFile(params){
    const _file = params.file;
    // 通过 FormData 对象上传文件
    var formData = new FormData();
    formData.append('file', _file);
    formData.append('xmflid', this.xmflid);
    formData.append('responseType', 'blob');
    // 请求路径
    let url = `${FDAPP_HOST}${this.actionUrl}`;
    this.uploadExcel(url, formData).then(async (res) => {
        // 成功res是'true'  失败是blob类型
        if (res[0] == 'true') {
            this.$message({
                message:'文件导入成功',
                type:'success',
                duration:3000
            });
            this.tableData.result =  res[1];
        } else {
            try {
                // await this.$confirm('导入文件内容错误，是否下载错误文件!', '提示', {
                //     confirmButtonText: '出错附件下载',
                //     cancelButtonText: '关闭',
                //     type: 'warning',
                // });
                // 下载出错附件
                const fileName = '样本信息导入错误文件.xls';
                const blob = new Blob([res], {
                    type: 'application/vnd.ms-excel',
                });
                if (window.navigator.msSaveOrOpenBlob) {
                    console.log('if');
                    navigator.msSaveBlob(blob, fileName);
                } else {
                    console.log('blob==',blob);    
                    var link = document.createElement('a');
                   
                    link.href = window.URL.createObjectURL(blob);
                    console.log('window.URL.createObjectURL(blob)1111==',window.URL.createObjectURL(blob));    
                    link.download = fileName;
                    link.click();
                    // 释放内存
                    window.URL.revokeObjectURL(link.href);
                }
            } catch (e) {
                this.$message.info('操作取消');
            }
        }
    });

},
uploadExcel(url, formData) {
    return new Promise((resolve, reject) => {
        post(url, {
            data:formData,
            responseType: 'blob',
            headers: {
                backdoor: 1,
            },
        }).then(
            async res => {
                // eslint-disable-next-line require-jsdoc
                function blobToBase64 (res) {
                    var blob = new Blob([res], { type: 'application/json' });
                    return new Promise((resolve, reject) => {
                        const fileReader = new FileReader();
                        fileReader.onload = (e) => {
                        // console.log(e.target.result, '88///');
                            resolve(e.target.result);
                        };
                        fileReader.readAsText(blob);
                        fileReader.onerror = () => {
                            reject(new Error('blobToBase64 error'));
                        };
                    });
                };
        
                let isSuccess = await blobToBase64(res);
                try{
                    const resData = JSON.parse(isSuccess);
                    // console.log(resData);
                    resolve(['true',resData]);
                }catch(e){
                    // 导入失败返回流
                    resolve(res);
                }
            },
            (err) => {
                reject(err);
            });
    });
},